typescript eltable动态生成表头

你可以使用 TypeScript 和 Element UI 的 el-table 组件动态生成表头。以下是一个简单的示例代码：

<template>
  <el-table :data="tableData">
    <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label">
    </el-table-column>
  </el-table>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  private tableData = [
    { name: 'John', age: 25, gender: 'male' },
    { name: 'Jane', age: 30, gender: 'female' },
    { name: 'Bob', age: 20, gender: 'male' },
  ];

  private tableColumns = [
    { prop: 'name', label: 'Name' },
    { prop: 'age', label: 'Age' },
    { prop: 'gender', label: 'Gender' },
  ];

  private created() {
    // add a new column dynamically
    this.tableColumns.push({ prop: 'email', label: 'Email' });
  }
}
</script>

在这个例子中，我们定义了一个 tableData 数组，包含了要显示的数据。我们还定义了一个 tableColumns 数组，包含了表头的列名和对应的数据字段。我们可以在 created 钩子函数中添加一个新的列，它会动态出现在表格中。

在模板中，我们使用 v-for 循环遍历 tableColumns 数组，动态生成 el-table-column 组件。我们使用 :prop 绑定数据字段，:label 绑定列名。这样，我们就可以根据 tableColumns 数组动态生成表头了。