vuejs2 - 在标题上显示/隐藏分组行单击 Vuetify2(v-data-table 组件)

Question

这是一个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>

请建议我如何解决这个问题？

Answer 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