Vuetify v数据表计算

Question

是否可以在v-data-table单元格中进行计算？

我创建了一个关于代码笔的基本示例

基本想法是这样的：

const headers = [
{ text: 'Dessert (100g serving)', value: 'name' },
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Calculate something', value: calc('calories', 'fat') },
];
function calc(calories, fat){
//do some kind of calculation with data from JSON
return(calories * fat)
}

Answer 1

我们可以使用数据表槽来实现这一点。v-data-table提供了大量用于自定义该表的插槽。

const headers = [
{ text: "Calories * Fat", value: "prod" }
]

<v-data-table :headers="headers" :items="desserts" :items-per-page="4" class="elevation-1">
<template v-slot:item.prod="{ item }">
{{ item.calories * item.fat }}
</template>
</v-data-table>

我们也可以调用computed|methods函数来进行更复杂的计算。

参见参考文献：https://vuetifyjs.com/en/components/data-tables/#slots

请参阅此处的工作CodePen：https://codepen.io/kiran589/pen/rNdvrXZ