Vuetify v-data-table ：没有数据时隐藏展开图标

Question

如何为没有数据的行隐藏 展开图标？

<v-data-table
  :headers="headers"
  :items="items"
  :options.sync="options"
  :footer-props="{
    'items-per-page-options': [20, 50, 100],
    'items-per-page-text': '',
  }"
  show-expand
  dense
>
  <template #item.index="{ index }">
    {{ options.itemsPerPage * (options.page - 1) + index + 1 }}.
  </template>
  <template #expanded-item="{ headers, item }">
    {{ item || ''}}
  </template>
</v-data-table>

Answer 1

数据 table 组件多了一个插槽：#item.data-table-select。

您可以覆盖此插槽以手动管理带有展开图标的最后一个单元格。

例如，此代码隐藏相关对象的 fat prop 低于 10 的行上的所有展开按钮：

...
<template #item.data-table-expand="{ item, expand, isExpanded }">
  <td v-if="item.fat < 10" class="text-start">
    <v-btn icon 
           @click="expand(!isExpanded)" 
           class="v-data-table__expand-icon"
           :class="{'v-data-table__expand-icon--active' : isExpanded}">
      <v-icon>mdi-chevron-down</v-icon>
    </v-btn>
  </td>
</template>
...

检查一个例子at CodePen。

Vuetify v-data-table ：没有数据时隐藏展开图标

Vuetify v-data-table : hide expand icon when no data

vuetify.js