element UI 动态生成表头

在Element UI中，可以使用el-table-column组件的v-for指令动态生成表头。以下是一个简单的例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="(item, index) in tableHeaders"
      :key="index"
      :prop="item.prop"
      :label="item.label">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableHeaders: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        // 可以根据实际需求动态添加或删除
      ],
      tableData: [
        { date: '2016-05-02', name: '王小虎' },
        { date: '2016-05-04', name: '张小刚' },
        // ...更多数据
      ]
    };
  }
};
</script>

在这个例子中，tableHeaders数组定义了表头的信息，包括表头的标题和对应的数据属性。el-table-column通过v-for指令遍历这个数组，并为每个元素创建一个表头列。prop属性指定了每列应该绑定的数据字段。tableData数组提供了表格的数据。