Vue3 + Element Plus 获取表格列信息

在 Vue 3 和 Element Plus 中，可以通过以下步骤获取表格的列信息：

实现步骤：

1. 使用 ref 绑定表格实例

2. 通过表格实例的 store.states.columns 获取列数据

3. 处理列信息（过滤隐藏列、处理嵌套表头等）

示例代码：

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>

关键点说明：

1. 表格实例绑定：

   html

   复制

   下载

   运行

   <el-table ref="tableRef"> <!-- 绑定 ref -->

2. 获取列数据：

   js

   复制

   下载

   tableRef.value.store.states.columns

3. 列信息处理：

   • 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);

注意事项：

1. 访问时机：确保在表格渲染完成后获取（如在 onMounted 或事件回调中）

2. 动态列：如果使用 v-if 动态控制列，获取前需确保列已渲染

3. 内部属性：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" ... />

提示：直接访问组件内部属性可能有版本兼容风险，优先考虑自行维护列配置数据。