如何指定'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>