element plus 表格实现动态列

在 Element Plus 中，你可以使用动态数据和插槽来实现表格的动态列。下面是一个简单的示例：

<template>
  <div>
    <el-table :data="tableData">
      <!-- 动态列 -->
      <el-table-column v-for="column in dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label">
        <!-- 自定义内容插槽 -->
        <template v-slot="{ row }">
          {{ row[column.prop] }}
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="addColumn">添加列</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25 },
        { name: 'Alice', age: 30 },
      ],
      dynamicColumns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
      ],
    };
  },
  methods: {
    addColumn() {
      // 模拟动态添加列
      const newColumn = {
        prop: 'email',
        label: '邮箱',
      };
      this.dynamicColumns.push(newColumn);
    },
  },
};
</script>

在上面的示例中，我们使用 `v-for` 指令遍历 `dynamicColumns` 数组，根据数组中的元素动态创建 `el-table-column` 组件，实现了表格的动态列。我们还使用了插槽（`v-slot`）来自定义每个单元格的内容。

通过点击按钮，我们可以触发 `addColumn` 方法来动态添加列。在这个示例中，我们添加了一个名为 `email` 的新列。

你可以根据你的需求和数据结构来调整示例代码，添加更多的列或自定义插槽中的内容，以实现更复杂的动态列功能。