当前位置：首页 > news >正文

el-table el-table-column表头嵌套循环数据

news 2025/7/28 19:46:45

需求：

不同以前现在需要表头嵌套循环以前只要

 <template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column></el-table></template>data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}]}}

现在需要表头嵌套循环：思路，两个数组，一个数组循环表格数据，一个循环表头

<el-tableref="pageTable":data="tableData"style="margin-top: 15px"height="548":header-cell-style="cellStyleFun"id="out-table2"><el-table-columnfixedlabel="管辖单位"prop="C_NAME":formatter="fmtTableProp"align="center"width="230"><template slot-scope="scope"><el-buttontype="text"style="white-space: pre-wrap"@click="detailTree(scope.row)">{{ scope.row.C_NAME }}</el-button></template></el-table-column><el-table-columnv-for="item in tableHeaderData" //单独循环表头-普通循环:key="item":label="item"align="center"width="140"><el-table-columnlabel="登录次数"prop="LOGIN_COUNT"align="center"width="140"><template slot-scope="scope"><span>{{ scope.row[item].LOGIN_COUNT }}</span></template></el-table-column><el-table-columnlabel="检查次数"prop="CHECK_COUNT"align="center"width="140"><template slot-scope="scope"><span>{{ scope.row[item].CHECK_COUNT }}</span></template></el-table-column></el-table-column></el-table>js:
tableHeaderData: [], // 头部列表数据
tableData: [], // 列表数据searchFun() {this.loading = true;const param = this.paramSet();workStatisticsByGx(param).then((data) => {this.loading = false;if (data.data && data.data.code == 10000) {this.tableHeaderData = data.data.otherObj;//表头时间this.tableData = data.data.obj;//表格数据} else {this.$confirm(data.data.message || "服务器忙", "提示", {type: "warning",center: true,customClass: "warn-dialog",}).then(() => {}).catch(() => {});}});},