vue+elementUI搭建动态表头的表格

在Vue中使用Element UI创建一个具有动态表头的表格，可以通过v-for指令动态渲染表头，并使用:key绑定唯一值。以下是一个简单的例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="header in tableHeaders"
      :key="header.prop"
      :prop="header.prop"
      :label="header.label">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableHeaders: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' }
      ],
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '李小虎', address: '上海市普陀区金沙江路 1517 弄' },
        { date: '2016-05-01', name: '赵小虎', address: '上海市普陀区金沙江路 1519 弄' },
        // ...更多数据
      ]
    };
  }
};
</script>

在这个例子中，tableHeaders数组定义了表格的表头信息，包括表头的标签和对应的数据属性。tableData数组提供了表格的数据。使用v-for指令动态创建了表头列，并通过:prop绑定了对应的数据字段。

这样，你就可以根据需要动态调整tableHeaders数组来更新表格的列。