Vuetify 2 分组数据表，带有自定义组标题和项目行 [英] Vuetify 2 grouped data table with customized group header and item rows

问题描述

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

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

Vue 代码:

<v-app><v-数据表稠密禁用排序:headers="headers";隐藏默认页脚:items=汽车"项目键=id"group-by=供应商"><template v-slot:group.header="{items, isOpen, toggle}"><th colspan=2"><v-icon @click="toggle";>{{ isOpen ?mdi-减":mdi-加"}}</v-图标>{{ items[0].vendor }}</th></模板><template v-slot:item={ item }"><tr><td><strong>{{ item.name }}</strong></td><td>{{ item.power }} HP</td></tr></模板></v-data-table></v-app>

Javascript 代码:

new Vue({el: '#app',vuetify: 新的 Vuetify(),数据 () {返回 {标题: [{文本:'模型名称'，值:'名称'}，{ 文本:'功率'，值:'功率' }],汽车: [{编号:1，名称:'320i',供应商:宝马"，功率:170},{编号:2，名称:'M5',供应商:宝马"，功率:350},{编号:3，name: '高尔夫 GTD',供应商:大众"，功率:184},{编号:4，名称:'Polo GTI',供应商:大众"，功率:190}]}}})

可以在此处找到 Codepen 演示.

解决方案

以下行为是之前 Vuetify 版本中的一个错误.使用 Vuetify 2.4.9+(或更早版本)将解决您的问题.

检查这个代码笔:https://codepen.io/seaskyways/pen/VwPbyER

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

//这是一些代码，因为 stackoverflow 不允许没有代码的代码笔

My goal is to create a Vuetify 2 data table from a list of car models. Data needs to be grouped by vendor with a customized group header row and also the item rows for each car model needs to be customized. Below is a very reduced example to show my main problem which is that Vuetify fully ignores my template for the item-slot and uses the default behaviour instead.

How can I make Vuetify use that template as well with avoiding to use a single template for each item column? ... because in my real world example there are a lot of columns which needs to be customized.

Vue code:

<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 code:

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 demo can be found here.

解决方案

The following behavior is a bug in previous Vuetify versions. Using Vuetify 2.4.9+ (or even earlier) will fix your problem.

Check this codepen: https://codepen.io/seaskyways/pen/VwPbyER

It's the same as yours just with updated Vuetify.

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

这篇关于Vuetify 2 分组数据表，带有自定义组标题和项目行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！