VUE+ elementUI 实现动态表头渲染

1、定义 columns（表头数据） 和 dataList（表格数据）

data() {return {loading: false,dataList: [{ name: '张三', sex: '男', age: 18 },{ name: '林琳', sex: '女', age: 20 },{ name: '王五', sex: '男', age: 22},{ name: '赵六', sex: '男', age: 20},],columns: [{ label: "姓名", prop: "name" },{ label: "性别", prop: "sex" },{ label: "年龄", prop: "age" },],}
},

2、通过数据渲染页面

<el-table ref="tables" v-loading="loading" :data="dataList"><el-table-columnv-for="item in columns":key="item.prop":prop="item.prop":label="item.label"align="center"><template slot-scope="scope"><span>{{ scope.row[item.prop] }}</span></template></el-table-column>
</el-table>

3、页面效果