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

在标题单击上显示/隐藏分组的行Vuetify2（v数据表组件）

1 个答案: