How to specify the slot of 'v-data-table group-by'

Question

Result photo I want to express the data horizontally like the result picture.

I want to specify a slot from v-data-table to group by (class), but it is not recognized.

Please let me know if you know how.

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

Please let me know if there is another way other than group by. Should we swap rowspan or row/col? I'm thinking about it. This is the current progress picture.

score 0 · Answer 1 · answered Jul 14 '21 at 01:47

Change your data model like below.

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: [...]},
    }
  }
}

then use 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>

How to specify the slot of 'v-data-table group-by'

1 Answers1