element Ui动态加载多列表头和数据

Element UI 提供了 `<el-table>` 组件用于展示表格数据，可以通过配置多个表头来实现动态加载多列表头和数据。

首先，在模板中使用 `<el-table>` 标签，同时定义一个 `columns` 数组，用来动态渲染表头。例如：

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

然后在组件的 `data` 中定义 `columns` 和 `tableData` 数组，并在需要的时候动态修改它们。例如：

<script>
export default {
  data() {
    return {
      columns: [
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
        // ... 其他表头列
      ],
      tableData: [
        { name: '张三', age: 20, /* ... 其他数据 */ },
        { name: '李四', age: 25, /* ... 其他数据 */ },
        // ... 其他表格数据
      ]
    }
  },
  methods: {
    // 动态添加表头
    addColumn() {
      this.columns.push({ label: '性别', prop: 'gender' });
    },
    // 动态添加表格数据
    addData() {
      this.tableData.push({ name: '王五', age: 30, gender: '男', /* ... 其他数据 */ });
    }
  }
}
</script>

以上代码演示了如何动态添加表头和表格数据，你可以根据自己的需求修改。