基本上,我需要将一个对象作为v-data-table中所有列的值传递。
例如,代替:
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37
}
我需要将此设置为“项目”中的示例项目:
{
name: 'Ice cream sandwich',
calories: {value: 237, code: x},
fat: {value: 9.0, code: y},
carbs: {value: 37, code: z}
}
我知道通过使用模板,由于我只想显示值而不是代码,所以我仍然只能显示值:
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:page.sync="page"
:items-per-page="itemsPerPage"
hide-default-footer
class="elevation-1"
@page-count="pageCount = $event"
>
<template #item.calories="{item}">
{{item.calories.value}}
</template>
<template #item.fat="{item}">
{{item.fat.value}}
</template>
<template #item.carbs="{item}">
{{item.carbs.value}}
</template>
<template #item.iron="{item}">
{{item.iron.value}}
</template>
</v-data-table>
</v-app>
</div>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
page: 1,
pageCount: 0,
itemsPerPage: 10,
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories'},
{ text: 'Fat', value: 'fat'},
{ text: 'Carb', value: 'carbs'},
],
desserts: [
{
name: 'Frozen Yogurt',
calories: {value: 159, score: 'x' },
fat: {value: 80, score: 'y' },
carbs: {value: 22, score: 'z' },
}
]
}
},
})
</script>
我的问题是我的表中将有许多列,它们是动态的。 (“标头”和“项目”是从服务器动态生成的。)我希望也不要生成大量(30个以上)这些模板条件,但是我现在真的看不到任何其他解决方案。
您可以使用headers
道具的value
字段。 Vuetify 接受属性路径此处:
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories.value'}, <-- HERE
{ text: 'Fat', value: 'fat.value'},
{ text: 'Carb', value: 'carbs.value'},
],