Vuetify 2 分组数据表，带有自定义组标题和项目行

Question

我的目标是从汽车模型列表中创建一个 Vuetify 2 数据表。数据需要按供应商与自定义组标题行进行分组，并且每个车型的项目行也需要自定义。下面是一个非常简化的示例，用于显示我的主要问题，即Vuetify 完全忽略了我的 item-slot 模板，而是使用默认行为。

如何让 Vuetify 也使用该模板，同时避免为每个项目列使用单个模板？...因为在我的真实示例中，有很多列需​​要自定义。

维代码：

<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>
      <template v-slot:item="{ item }">
        <tr>
          <td><strong>{{ item.name }}</strong></td>
          <td>{{ item.power }} HP</td>
        </tr>
      </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
        }
      ]
    }
  }
})

Codepen 演示可以在这里找到。

Answer 1

以下行为是先前 Vuetify 版本中的错误。使用 Vuetify 2.4.9+（或更早版本）将解决您的问题。

检查此代码笔：https://codepen.io/seaskyways/pen/VwPbyER

它和你的一样，只是更新了 Vuetify。

// and this is some code cuz stackoverflow doesn't allow codepens without code