如何解决如何指定'v-data-table group-by'的槽
Result photo 我想像结果图一样横向表达数据。
我想从 v-data-table 中指定一个槽来分组(类),但无法识别。
如果你知道怎么做,请告诉我。
<template #[`item.group-by`]="{ item }">
</template>
如果有除 group by 以外的其他方式,请告诉我。 我们应该交换 rowspan 还是 row/col?我正在考虑。 This is the current progress picture.
解决方法
更改您的数据模型,如下所示。
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',{class: 'C',}
}
}
然后使用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。