element ui table动态渲染表头

1.在模板中，使用

v-for

指令遍历

tableData

数组，并将每个对象的属性作为表格的列名来渲染表头。

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

2.定义

tableColumns

数组，并在组件创建时根据数据动态生成它。如果想根据

tableData

中第一个对象的属性来渲染表头列，可以在

created

钩子函数中进行操作

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 25 },
        // 其他数据...
      ],
      tableColumns: [] // 表格列配置数组
    };
  },
  created() {
    if (this.tableData.length > 0) {
      // 获取第一个对象的属性作为表头列
      this.tableColumns = Object.keys(this.tableData[0]).map(key => {
        return { key: key, label: key };
      });
    }
  }
};
</script>

3.当

tableData

的数据发生变化时，表格的表头将会根据新的数据动态渲染。

注意：在使用动态表头时，要确保

tableData

中的每个对象都具有相同的属性结构，以保证表格正常工作。