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" ... />

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