我的目标是从一系列汽车型号的列表中创建一个 Vuetify 2 数据表格。需要按供应商分组,并使用自定义组标题行,同时需要自定义每个汽车型号的项目行。以下是一个非常简化的示例,显示了我主要问题的重点,即 Vuetify 完全忽略了我的 item-slot 模板,并使用了默认行为。
如何使 Vuetify 也使用该模板,同时避免为每个项目列使用单个模板? ... 因为在我的真实世界示例中,有许多需要自定义的列。
Vue 代码:
<div id="app">
<v-app>
<v-data-table
dense
disable-sort
:headers="headers"
hide-default-footer
:items="cars"
item-key="id"
group-by="vendor"
>
<template v-slot:group.header="{items, isOpen, toggle}">
<th colspan="2">
<v-icon @click="toggle"
>{{ isOpen ? 'mdi-minus' : 'mdi-plus' }}
</v-icon>
{{ items[0].vendor }}
</th>
</template>
<template v-slot:item="{ item }">
<tr>
<td><strong>{{ item.name }}</strong></td>
<td>{{ item.power }} HP</td>
</tr>
</template>
</v-data-table>
</v-app>
</div>
Javascript 代码:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{ text: 'Model name', value: 'name' },
{ text: 'Power', value: 'power' }
],
cars: [
{
id: 1,
name: '320i',
vendor: 'BMW',
power: 170
},
{
id: 2,
name: 'M5',
vendor: 'BMW',
power: 350
},
{
id: 3,
name: 'Golf GTD',
vendor: 'Volkswagen',
power: 184
},
{
id: 4,
name: 'Polo GTI',
vendor: 'Volkswagen',
power: 190
}
]
}
}
})
可以在这里找到Codepen演示。
group.header
插槽会使item
插槽被忽略,所以唯一的方法似乎是为每个列使用item.name
插槽。这不需要太多额外的代码... - Fab