Vue3+Vuetify3可展开v-data-table异常问题求助

问题分析 #

你遇到的两个核心问题：

• 可展开表格内容不显示：展开行模板错误引用了headers而非当前行数据，同时item-value配置错误导致组件无法正确识别行
• 所有行同时展开：item-value未设置为每行的唯一标识，且expanded初始值类型不匹配

修正步骤与代码 #

1. 修正核心配置 #

• 将expanded初始值改为空数组（支持多行展开），若需单选展开可设为null，但必须配合正确的item-value
• item-value设置为每行数据的唯一字段（比如currencydefinition.currencyid），确保Vuetify能区分不同行
• info初始值改为空对象，匹配接口返回的对象类型

2. 修复展开行模板 #

展开行模板中通过item访问当前行数据，而非错误的headers

修改后的完整代码 #

<script setup>
import { ref } from 'vue'
import currencyHelpers from '../lib/currencyHelpers';

const info = ref({}); // 改为对象，匹配接口返回类型
const currencies = ref([]);
const headers = [
  { title: '名称', value: 'currencydefinition.fullyqualifiedname' },
  { title: 'ID', value: 'currencydefinition.currencyid' },
  { title: 'ID注册费', value: 'currencydefinition.idregistrationfees' },
  { title: 'ID导入费', value: 'currencydefinition.idimportfees' },
  { title: '转换器名称', value: 'currencydefinition.gatewayconvertername' },
  { title: '证明协议', value: 'currencydefinition.proofprotocol' },
  { title: '选项', value: 'currencydefinition.options' }
];
const expanded = ref([]); // 数组支持多行展开；单选展开可设为null

(async () => {
  info.value = await currencyHelpers.getInfo();
  currencies.value = await currencyHelpers.listCurrencies();
})();

</script>

<template>
  <v-layout>
    <v-row>
      <v-col>
        <h1>加密货币列表</h1>
        <v-container class="mx-auto pa-6">
          <v-data-table 
            :items="currencies" 
            :headers="headers" 
            item-value="currencydefinition.currencyid" <!-- 设置行唯一标识 -->
            v-model:expanded="expanded"
            show-expand
          >
            <!-- 顶部工具栏 -->
            <template v-slot:top>
              <v-toolbar flat>
                <v-toolbar-title>版本 {{ info.VRSCversion }}</v-toolbar-title>
              </v-toolbar>
            </template>

            <!-- 展开行内容 -->
            <template v-slot:expanded-row="{ item }"> <!-- 解构获取当前行数据 -->
              <tr>
                <td :colspan="headers.length">
                  更多信息：{{ item.currencydefinition.fullyqualifiedname }}
                  <!-- 可根据需求添加更多当前行的详细数据 -->
                </td>
              </tr>
            </template>
          </v-data-table>
        </v-container>
      </v-col>
    </v-row>
  </v-layout>
</template>

<style scoped>
</style>

额外说明 #

• 若需单选展开（同一时间仅一行展开），只需将expanded初始值改为null，Vuetify会自动处理单选逻辑
• 展开行内容可自由定制，比如添加卡片、子表格等组件

问题截图：

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