Vuetify 3.3.x v-data-table展开行及分页相关问题咨询

问题1：分页时关闭所有展开行 #

给v-data-table绑定展开行数组，监听分页变化触发清空操作：

<template>
  <v-data-table
    v-model:expanded="expandedRows"
    :page.sync="currentPage"
    <!-- 其他表格属性 -->
  >
    <!-- 插槽内容 -->
  </v-data-table>
</template>

<script setup>
import { ref, watch } from 'vue'
const expandedRows = ref([])
const currentPage = ref(1)

// 分页切换时清空所有展开行
watch(currentPage, () => {
  expandedRows.value = []
})
</script>

问题2：点击行调用函数并在展开行展示结果 #

通过行点击事件触发函数，将结果存入当前行数据，再在展开行插槽渲染：

<template>
  <v-data-table
    @click:row="handleRowClick"
    v-model:expanded="expandedRows"
    <!-- 其他表格属性 -->
  >
    <template v-slot:expanded-row="{ item, columns }">
      <td :colspan="columns.length">
        {{ item.randomAnswer || '加载中...' }}
      </td>
    </template>
  </v-data-table>
</template>

<script setup>
import { ref } from 'vue'
const expandedRows = ref([])

function getRandomAnswer(val) {
  // 自定义随机结果逻辑
  return `随机结果：${Math.floor(Math.random() * 100)}`
}

function handleRowClick(item) {
  // 调用函数并存储结果到当前行
  item.randomAnswer = getRandomAnswer(null)
  // 切换当前行展开状态
  const rowId = item.id // 确保item有唯一标识字段，无则自定义
  const exists = expandedRows.value.includes(rowId)
  if (exists) {
    expandedRows.value = expandedRows.value.filter(id => id !== rowId)
  } else {
    expandedRows.value.push(rowId)
  }
}
</script>

问题3：点击一行所有行均展开 #

该问题多因行唯一标识错误或展开状态绑定类型错误导致：

1. 确保每个数据项有唯一标识，若无则通过item-key指定自定义唯一字段：

<v-data-table
  :item-key="item => item.uniqueField"
  <!-- 其他表格属性 -->
>
</v-data-table>

2. 确认v-model:expanded绑定的是数组类型，而非单个布尔值：

<script setup>
// 正确：用数组存储展开行的唯一标识
const expandedRows = ref([])
// 错误：单个布尔值会导致所有行同步展开/收起
// const expandedRows = ref(false)
</script>

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