在标题单击 Vuetify2（v-data-table 组件）上显示/隐藏分组行答案

【问题标题】：Show/hide grouped rows on header click Vuetify2 (v-data-table component)在标题单击 Vuetify2（v-data-table 组件）上显示/隐藏分组行
【发布时间】：2019-09-15 13:41:15
【问题描述】：

这是一个example 的数据表，其中的行按类别分组。我想通过组标题单击来展开/折叠它。尝试使用 v-slot:item 替换行的默认呈现，但似乎不起作用。

第二种方式是使用v-slot:group替换分组行的默认渲染，但我希望应该是另一种方式。

代码如下：

<v-data-table
      dense
      :headers="headers"
      :items="desserts"
      item-key=name
      group-by="category"
      class="elevation-1"
    >
      <template v-slot:item="{ item }">
        <template v-if="item.show">
          Show row
        </template>
        <template v-else>

        </template>
      </template>
      <template v-slot:group.header="{ items }">
        <td @click="expandRows(items[0])" 
            class="text-xs-right"
          >
            <strong>{{ items[0].category }}</strong>
        </td>
        <td class="text-xs-right">22%</td>
        <td class="text-xs-right">24%</td>
        <td class="text-xs-right">25%</td>
      </template>
</v-data-table>

请建议我该如何解决？

【问题讨论】：

有人知道吗？

标签： vuejs2 vuetify.js

【解决方案1】：

解决方案是使用 v-slot:group 替换组标题和分组行的默认呈现。

  <template v-slot:group="{ items, expand }">
    <tr @click="toggle(items[0].category)">
      <td  class="text-xs-right"><strong>{{ items[0].category }}</strong></td>
      <td class="text-xs-right">22%</td>
      <td class="text-xs-right">24%</td>
      <td class="text-xs-right">25%</td>
    </tr>
    <tr v-for="(item, index) in items" :key="item.id" v-show="!item.hide">
      <td v-for="header in headers">
        {{ item[header.value] }}
      </td> 
    </tr>
  </template>

这里是codepen

【讨论】：