Vuetify 2 自定义分组表格，包括自定义的组标题和项目行。

Question

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

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

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>
      <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演示。

- GreenTurtle

---

当给问题投反对票时，如果能够得到一个评论说明问题出在哪里就好了... - GreenTurtle

我点赞你的问题只是因为没有理由踩它。然而，我认为使用 group.header 插槽会使 item 插槽被忽略，所以唯一的方法似乎是为每个列使用 item.name 插槽。这不需要太多额外的代码... - Fab

谢谢！你可能是对的，即使文档中没有提到（或者我只是瞎了）。老实说，我看不出忽略它的理由，因为它们应该是互不相关的。然而，目前似乎这是唯一的方法，即使我的真实代码有更多列（14列），它们都需要以某种方式进行自定义，所以这将增加很多样板代码... - GreenTurtle

很抱歉 @GregK ，我这边关于这个话题没有任何消息。我通过单独定义每列的方式解决了问题。虽然不是非常聪明，但至少它起作用了。 - GreenTurtle

只是让你知道 @GreenTurtle，那个例子对我来说帮助非常大，让我达到了想要的目标。我非常感激！ - GregK

Answer 1

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

检查此 CodePen：https://codepen.io/seaskyways/pen/VwPbyER 它与您的代码相同，只是使用了更新的 Vuetify。

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

- Seaskyways