el-table动态表头

要实现动态表头，可以使用 Element UI 的 el-table 组件的 :columns 属性来动态绑定表头数据。具体步骤如下：

1. 在 data 中定义一个数组 columns，用来存储表头数据。

2. 在 el-table 中绑定 :columns="columns"。

3. 在表格数据发生变化时，动态更新 columns 数组。例如，可以监听数据变化的回调函数，根据数据变化动态生成 columns 数组。

下面是一个简单的示例代码：

<template>
  <div>
    <el-table :data="tableData" :columns="columns"></el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20 },
        { name: 'Jane', age: 22 },
        { name: 'Bob', age: 25 }
      ],
      columns: [
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' }
      ]
    }
  },
  mounted() {
    // 模拟数据变化
    setInterval(() => {
      this.tableData.push({ name: 'Tom', age: 18 });
      this.columns.push({ label: '性别', prop: 'gender' });
    }, 3000);
  }
}
</script>

在这个示例中，初始表头有两列：姓名和年龄。然后每隔三秒钟，会往表格中添加一行数据，并且动态添加一列性别作为表头。这样就实现了动态表头的功能。