Vuetify 3中如何按条件隐藏v-data-table的展开按钮？

Vuetify 3 完全支持按条件控制表格行展开按钮的显示，只是相比 Vuetify 2，插槽参数和展开状态的控制方式发生了变化——V2 中提供的 expand 函数在 V3 的插槽中不再存在，需要通过绑定表格的 expanded 属性手动管理展开状态。

错误原因说明 #

你在 V3 中使用 V2 的代码触发 Uncaught TypeError: expand is not a function 错误，是因为 V3 重构了 v-data-table 的插槽参数逻辑，item.data-table-expand 插槽不再传递 expand 函数，而是需要通过组件的 expanded 属性来跟踪和切换展开状态。

实现步骤与代码示例 #

以下是完整的实现方案，以 Composition API 为例：

模板部分

<v-data-table
  :items="items"
  :expanded="expandedRows"
  show-expand
>
  <!-- 自定义展开按钮插槽，按条件渲染 -->
  <template #item.data-table-expand="{ item, isExpanded }">
    <!-- 仅当 item.versions 长度大于 0 时显示展开按钮 -->
    <td v-if="item?.versions?.length > 0" class="text-start">
      <v-btn
        variant="text"
        density="comfortable"
        @click="toggleExpand(item)"
        class="v-data-table__expand-icon"
        :class="{ 'v-data-table__expand-icon--active': isExpanded }"
      >
        <v-icon>{{ isExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
      </v-btn>
    </td>
    <!-- 不满足条件时渲染空单元格，避免表格布局错乱 -->
    <td v-else></td>
  </template>

  <!-- 展开行内容插槽 -->
  <template #expanded-item="{ item }">
    <td colspan="100%">
      <v-list>
        <v-list-item v-for="version in item.versions" :key="version.id">
          版本：{{ version.name }}
        </v-list-item>
      </v-list>
    </td>
  </template>
</v-data-table>

脚本部分

<script setup>
import { ref } from 'vue'

// 模拟表格数据，每个item需包含唯一标识（这里用id）
const items = ref([
  { id: 1, name: '项目A', versions: [{ id: 11, name: 'v1.0' }, { id: 12, name: 'v2.0' }] },
  { id: 2, name: '项目B', versions: [] },
  { id: 3, name: '项目C', versions: [{ id: 31, name: 'v1.0' }] }
])

// 存储已展开行的唯一标识（与item的id对应）
const expandedRows = ref([])

// 切换行展开状态的函数
const toggleExpand = (item) => {
  const rowId = item.id
  const index = expandedRows.value.indexOf(rowId)
  
  if (index > -1) {
    // 移除id，收起当前行
    expandedRows.value.splice(index, 1)
  } else {
    // 添加id，展开当前行
    expandedRows.value.push(rowId)
  }
}
</script>

关键要点 #

• 必须给 v-data-table 绑定 expanded 属性，用数组存储已展开行的唯一标识（如 item 的 id）
• 插槽参数中的 isExpanded 仍然可用，用来判断当前行的展开状态，方便切换图标或样式
• 不满足显示条件时，要渲染空的 <td> 标签，防止表格列布局错位
• 通过手动操作 expandedRows 数组来控制展开状态，替代 V2 中的 expand 函数

内容的提问来源于stack exchange，提问作者Ajay Mohan