element table 动态表头

如果需要实现 Element UI 表格的动态表头，你可以使用动态绑定 el-table-column 的属性来实现。具体步骤如下：

1. 在 data 中定义一个数组，用于存储表头的配置信息。
2. 在 el-table 中使用 v-for 循环遍历表头配置数组，动态绑定 el-table-column 的属性。
3. 如果需要在表头列中自定义显示内容，可以使用 slot-scope 属性来实现。

以下是一个示例代码：

<template>
  <el-table :data="tableData">
    <el-table-column v-for="(item, index) in tableColumns" 
      :key="index" 
      :prop="item.prop" 
      :label="item.label">
      <template v-if="item.slotName" slot-scope="scope">
        <slot :name="item.slotName" :row="scope.row" :column="item"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableColumns: [
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'age',
          label: '年龄'
        },
        {
          prop: 'gender',
          label: '性别'
        },
        {
          prop: 'action',
          label: '操作',
          slotName: 'action'
        }
      ],
      tableData: [
        {
          name: '张三',
          age: 18,
          gender: '男'
        },
        {
          name: '李四',
          age: 20,
          gender: '女'
        },
        {
          name: '王五',
          age: 22,
          gender: '男'
        }
      ]
    }
  }
}
</script>

在上面的例子中，我们使用了一个数组 tableColumns 来存储表头的配置信息，包括每一列的 prop、label 和 slotName。然后在 el-table 中使用 v-for 循环遍历表头配置数组，动态绑定 el-table-column 的属性。如果某一列需要自定义显示内容，我们可以在 tableColumns 中定义 slotName 属性，并在 el-table-column 中使用 slot-scope 属性来实现自定义显示内容。最后，在表格的具体数据中，我们只需要按照表头列的属性名定义数据即可。