Vuetify 2分组数据表：自定义item插槽模板不生效的解决方法

这个问题我之前也踩过坑，Vuetify 2的分组数据表格在启用group-by时，全局的item插槽会被分组渲染逻辑覆盖，所以你写的自定义模板才会被忽略，依然走默认渲染。要解决这个问题，你需要改用body插槽来接管整个表格主体的渲染，这样既能自定义条目行，又不用为每个列单独编写模板。

核心解决方案 #

替换原来的v-slot:item为v-slot:body="{ items }"，在这个插槽里遍历所有条目，手动渲染每一行的内容。同时保留你已经写好的group.header插槽，它不受影响。

修改后的完整代码 #

Vue模板部分 #

<div id="app">
  <v-app>
    <v-data-table dense disable-sort :headers="headers" hide-default-footer :items="cars" item-key="id" group-by="vendor" >
      <!-- 保留自定义分组头插槽 -->
      <template v-slot:group.header="{items, isOpen, toggle}">
        <th colspan="2">
          <v-icon @click="toggle" >{{ isOpen ? 'mdi-minus' : 'mdi-plus' }} </v-icon>
          {{ items[0].vendor }}
        </th>
      </template>
      <!-- 改用body插槽接管主体渲染 -->
      <template v-slot:body="{ items }">
        <tbody>
          <!-- 遍历每个条目，自定义行内容 -->
          <tr v-for="item in items" :key="item.id">
            <td><strong>{{ item.name }}</strong></td>
            <td>{{ item.power }} HP</td>
          </tr>
        </tbody>
      </template>
    </v-data-table>
  </v-app>
</div>

JavaScript部分（无需修改） #

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        { text: 'Model name', value: 'name' },
        { text: 'Power', value: 'power' }
      ],
      cars: [
        { id: 1, name: '320i', vendor: 'BMW', power: 170 },
        { id: 2, name: 'M5', vendor: 'BMW', power: 350 },
        { id: 3, name: 'Golf GTD', vendor: 'Volkswagen', power: 184 },
        { id: 4, name: 'Polo GTI', vendor: 'Volkswagen', power: 190 }
      ]
    }
  }
})

为什么这样有效？ #

在Vuetify 2的分组数据表格中，启用group-by后，表格的主体结构会被拆分成“分组头+分组内条目”的嵌套结构，此时全局的item插槽会被分组逻辑忽略。而body插槽是整个表格主体的入口，你可以完全控制里面的DOM结构，包括遍历渲染每个条目行，这样就实现了自定义行内容的需求，同时避免了为每个列单独写模板的麻烦。

内容的提问来源于stack exchange，提问作者GreenTurtle