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

【问题标题】：How to specify the slot of 'v-data-table group-by'如何指定'v-data-table group-by'的槽
【发布时间】：2021-09-02 22:19:52
【问题描述】：

Result photo 我想像结果图一样水平表达数据。

我想从 v-data-table 中指定一个槽来分组（类），但它无法识别。

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

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

如果除了 group by 之外还有其他方法，请告诉我。我们应该交换行跨度还是行/列？我正在考虑。 This is the current progress picture.

【问题讨论】：

标签： vue.js vuetify.js v-data-table

【解决方案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>

【讨论】：