在 Vue 3 和 Element Plus 中，可以通过以下步骤获取表格的列信息：
实现步骤：
-
使用
ref绑定表格实例 -
通过表格实例的
store.states.columns获取列数据 -
处理列信息（过滤隐藏列、处理嵌套表头等）
示例代码：
vue
复制
下载
<template><el-table ref="tableRef" :data="tableData"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="姓名" width="180" /><el-table-column prop="address" label="地址" /><el-table-column v-if="showColumn" prop="phone" label="电话" /></el-table>
</template><script setup>
import { ref, onMounted } from 'vue';const tableRef = ref(null); // 表格实例引用
const tableData = [/* 你的数据 */];
const showColumn = ref(true); // 控制列的显示// 获取表格列信息的方法
const getTableColumns = () => {if (!tableRef.value) return [];// 获取原始列数据（包含所有列，包括隐藏列和嵌套列）const rawColumns = tableRef.value.store.states.columns;// 过滤并处理列信息return rawColumns.filter(col => col?.property) // 过滤有效列（可根据需要调整）.map(col => ({prop: col.property, // 列对应的数据字段label: col.label, // 列标题width: col.realWidth, // 列实际宽度visible: !col.isColumnHidden // 是否可见}));
};onMounted(() => {// 在组件挂载后获取列信息const columns = getTableColumns();console.log('表格列信息:', columns);
});
</script>
关键点说明：
-
表格实例绑定：
html
复制
下载
运行
<el-table ref="tableRef"> <!-- 绑定 ref -->
-
获取列数据：
js
复制
下载
tableRef.value.store.states.columns
-
列信息处理：
-
property: 对应prop属性（数据字段） -
label: 表头显示文本 -
realWidth: 列的实际宽度 -
isColumnHidden: 列是否被隐藏（动态列或v-if控制）
-
处理嵌套表头：
如果需要处理嵌套表头（多级表头），需递归遍历：
js
复制
下载
const getNestedColumns = (columns) => {return columns.map(col => ({prop: col.property,label: col.label,children: col.children ? getNestedColumns(col.children) : null}));
};const nestedColumns = getNestedColumns(tableRef.value.store.states.columns);
注意事项：
-
访问时机：确保在表格渲染完成后获取（如在
onMounted或事件回调中） -
动态列：如果使用
v-if动态控制列，获取前需确保列已渲染 -
内部属性：
store.states.columns是 Element Plus 内部属性，不同版本可能有差异
替代方案（推荐）：
如果只需要列定义，建议自行维护一个列配置数组：
js
复制
下载
const columnsConfig = ref([{ prop: 'date', label: '日期' },{ prop: 'name', label: '姓名' },{ prop: 'address', label: '地址' }
]);// 在模板中循环渲染
<el-table-column v-for="col in columnsConfig" :key="col.prop" ... />
提示：直接访问组件内部属性可能有版本兼容风险，优先考虑自行维护列配置数据。
 原理与实践指南)
