如何指定'v-data-table group-by'的插槽

Question

结果照片我想像结果图片一样水平地表达数据。

我想指定一个从v-datatable到groupby(class(的slot，但它无法识别。

如果你知道怎么做，请告诉我。

<template #[`item.group-by`]="{ item }">

</template>

请告诉我除了分组之外还有其他方式。我们应该交换行span还是行/col？我正在考虑。这是当前的进度图。

Answer 1

如下更改数据模型。

data: () => ({
headers: {
{text: 'class'},
{text: 'school1'},
{text: 'school2'},
{text: 'school3'}
},
items: {
... If you need to keep your items, use computedItems. ... 
}
},
computed: {
computedItems () {
... rebuild your items like this ...
return {
{class: 'A', school1: [...], school2: [...], school3: [...]},
{class: 'B', school1: [...], school2: [...], school3: [...]},
{class: 'C', school1: [...], school2: [...], school3: [...]},
}
}
}

然后使用v-slot:item.name

<v-data-table
:headers="headers"
:items="computedItems">
<template v-slot:item.school1="{item}">
<template v-for>
<img src="...">
</template>
</template>
<template v-slot:item.school2="{item}">
<template v-for>
<img src="...">
</template>
</template>
<template v-slot:item.school3="{item}">
<template v-for>
<img src="...">
</template>
</template>
</v-data-table>