vue-component - Vuetify 数据表行中的计算属性

Question

我正在为网站使用 Vuetify 和 Vuetify/Datatables。
现在我想要一些 computed表的每一行的属性。

为此，我可能需要制作 <template> 的一个组件。元素并将计算属性添加到该组件。我试过 <template is="myComponent" :m="props.item">但这不起作用。

<v-data-table
  :headers="headers"
  :items="items"
  hide-actions
  class="elevation-1"
>
  <template slot="items" slot-scope="props">
    <td>{{ THIS_VALUE_COMPUTED }}</td>
    <td class="text-xs-right">{{ props.item.calories }}</td>
    <td class="text-xs-right">{{ props.item.fat }}</td>
    <td class="text-xs-right">{{ props.item.carbs }}</td>
    <td class="text-xs-right">{{ props.item.protein }}</td>
    <td class="text-xs-right">{{ props.item.iron }}</td>
  </template>
</v-data-table>

Answer 1

这是一个有点老的问题，但这可能有效，它来自 vuetify 2.0.19 文档。在这里，您可以对表的单个属性之一进行计算值。

<v-data-table
  :headers="headers"
  :items="items"
  hide-actions
  class="elevation-1"
>
   <template
            v-slot:item.calories="{ item }" >
    {{ THIS_VALUE_COMPUTED }}
  </template>
</v-data-table>