Vue3与Element Plus动态表格列不显示数据，求排查建议

核心错误点 #

• 循环数据源错误：你写的v-for="(d ,i) in data.values"中，data是一个数组，数组本身并没有values属性，所以这个循环根本没有迭代任何元素，自然不会生成对应的表格列。
• 数据结构设计不合理：你把列的配置（label和value）放在了每一条表格数据对象里，但Element-Plus的表格列是全局统一的，每条数据应该对应列的具体值，而非列的配置信息。

修正后的代码 #

模板部分 #

<template>
  <el-table :data="tableData" class="full-table">
    <el-table-column fixed prop="name" label="Employee" width="250"/>
    <el-table-column prop="phone" label="Phone"/>
    <!-- 循环单独定义的列配置数组 -->
    <el-table-column v-for="(col ,i) in tableColumns" :key="i" :prop="col.prop" :label="col.label" />
  </el-table>
</template>

脚本部分 #

<script setup lang="ts">
import {ElTable, ElTableColumn} from 'element-plus'

// 单独定义表格列的配置（全局统一）
const tableColumns = [
  { label: 'email', prop: 'email' }
]

// 调整数据结构，每条数据对应列的具体值
const tableData = [
  {
    name: 'personal1',
    phone: 6767000,
    email: 'personal1@mail.com'
  },
  {
    name: 'personal2',
    phone: 9090000,
    email: 'personal2@mail.com'
  }
]
</script>

补充说明 #

如果你的业务场景确实需要动态从数据中提取列（比如不同数据项可能有不同的扩展列），那你需要先从数据中提取出统一的列配置，再进行循环。例如先遍历所有数据项的values，收集不重复的列label和prop，再用这个收集到的数组作为v-for的数据源，同时调整每条数据的结构，让prop对应的数据能被正确读取。

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