vue.js - 如何指定'v-data-table group-by'的槽

Question

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

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

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

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

请让我知道是否有除分组以外的其他方式。我们应该交换行跨度还是行/列？我正在考虑。 这是目前的进度图。

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>