el-table动态表头踩坑
// 获取表格动态表头 getTableHead(data){ let _list = []; if(Array.isArray(data) && data.length>0){ data.forEach((item, index) => { let obj = {} item.evaluateValueItem.forEach((items, idx) => { obj[idx + 'key'] = items.evaluateItemName if (index === 0) { _list.push({ prop: items.evaluateItemId, label: items.evaluateItemName }) } item[items.evaluateItemId] = items.star; }) }) } return _list; },
// 培训师线下单次培训结果导入分页查询 trainerStaticsOfflineList(this.queryParams).then(res=>{ this.tableData = res.data.list || []; this.total = res.data.total || 0; this.mergeColHead = this.getTableHead(this.tableData); //获取动态表头项 }).finally(res=>{ this.loading = false; }) }
dom渲染:
<el-table-column align="center" label="评价项(分)"> <el-table-column v-for="(item, index) in mergeColHead" :key='index' :prop="item.prop" :label="item.label" align="center"> </el-table-column> </el-table-column>
接口返回元数据:
[ { "id": "371deaab4de446b6914da4a3f8fd9ff2", "trainPlanId": null, "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "授课水平", "evaluateMode": 0, "star": 2, "comments": null, "personId": "2934d0828a37beba5be29472df8137c41", "personName": "赵云", "evaluateTime": "2023-11-27 17:56:43", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null, "evaluateValueItem": [ { "id": "371deaab4de446b6914da4a3f8fd9ff2", "trainPlanId": "e11052108ed4401bbccffb701542f69f", "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "授课水平", "evaluateItemId": "fef14226062b409d87d79c8835938855", "evaluateMode": 0, "star": 2, "comments": null, "personId": "2934d0828a37beba5be29472df8137c41", "personName": "赵云", "evaluateTime": "2023-11-27T09:56:43.000+00:00", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null }, { "id": "970e570d6f67432d8f9a7a1dbe5052e5", "trainPlanId": "e11052108ed4401bbccffb701542f69f", "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "专业知识", "evaluateItemId": "bb68df2a1d204f73844422065f372634", "evaluateMode": 0, "star": 5, "comments": null, "personId": "2934d0828a37beba5be29472df8137c41", "personName": "赵云", "evaluateTime": "2023-11-27T09:56:43.000+00:00", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null }, { "id": "9b75f0332b434537b9c80b0190aedae0", "trainPlanId": "e11052108ed4401bbccffb701542f69f", "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "表达能力", "evaluateItemId": "7aa58ad568df4350a97febd22a27ae63", "evaluateMode": 0, "star": 5, "comments": null, "personId": "2934d0828a37beba5be29472df8137c41", "personName": "赵云", "evaluateTime": "2023-11-27T09:56:43.000+00:00", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null } ] }, { "id": "61b350ee2ad8413093d88ad806e7d9e5", "trainPlanId": null, "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "表达能力", "evaluateMode": 0, "star": 4, "comments": null, "personId": "2934d0828a37beba5be29472df8137c4", "personName": "陈昌明", "evaluateTime": "2023-11-27 17:50:59", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null, "evaluateValueItem": [ { "id": "61b350ee2ad8413093d88ad806e7d9e5", "trainPlanId": "e11052108ed4401bbccffb701542f69f", "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "表达能力", "evaluateItemId": "7aa58ad568df4350a97febd22a27ae63", "evaluateMode": 0, "star": 4, "comments": null, "personId": "2934d0828a37beba5be29472df8137c4", "personName": "陈昌明", "evaluateTime": "2023-11-27T09:50:59.000+00:00", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null }, { "id": "c8431c3e641c4c68a8d69b0e5f5e9baf", "trainPlanId": "e11052108ed4401bbccffb701542f69f", "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "授课水平", "evaluateItemId": "fef14226062b409d87d79c8835938855", "evaluateMode": 0, "star": 3, "comments": null, "personId": "2934d0828a37beba5be29472df8137c4", "personName": "陈昌明", "evaluateTime": "2023-11-27T09:50:59.000+00:00", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null }, { "id": "cb182da5acb8490dbb20c632ce0af6d8", "trainPlanId": "e11052108ed4401bbccffb701542f69f", "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "专业知识", "evaluateItemId": "bb68df2a1d204f73844422065f372634", "evaluateMode": 0, "star": 2, "comments": null, "personId": "2934d0828a37beba5be29472df8137c4", "personName": "陈昌明", "evaluateTime": "2023-11-27T09:50:59.000+00:00", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null } ] } ]
组装后的效果:
[ { "id": "371deaab4de446b6914da4a3f8fd9ff2", "trainPlanId": null, "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "授课水平", "evaluateMode": 0, "star": 2, "comments": null, "personId": "2934d0828a37beba5be29472df8137c41", "personName": "赵云", "evaluateTime": "2023-11-27 17:56:43", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null, "evaluateValueItem": [ { "id": "371deaab4de446b6914da4a3f8fd9ff2", "trainPlanId": "e11052108ed4401bbccffb701542f69f", "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "授课水平", "evaluateItemId": "fef14226062b409d87d79c8835938855", "evaluateMode": 0, "star": 2, "comments": null, "personId": "2934d0828a37beba5be29472df8137c41", "personName": "赵云", "evaluateTime": "2023-11-27T09:56:43.000+00:00", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null }, { "id": "970e570d6f67432d8f9a7a1dbe5052e5", "trainPlanId": "e11052108ed4401bbccffb701542f69f", "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "专业知识", "evaluateItemId": "bb68df2a1d204f73844422065f372634", "evaluateMode": 0, "star": 5, "comments": null, "personId": "2934d0828a37beba5be29472df8137c41", "personName": "赵云", "evaluateTime": "2023-11-27T09:56:43.000+00:00", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null }, { "id": "9b75f0332b434537b9c80b0190aedae0", "trainPlanId": "e11052108ed4401bbccffb701542f69f", "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "表达能力", "evaluateItemId": "7aa58ad568df4350a97febd22a27ae63", "evaluateMode": 0, "star": 5, "comments": null, "personId": "2934d0828a37beba5be29472df8137c41", "personName": "赵云", "evaluateTime": "2023-11-27T09:56:43.000+00:00", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null } ], "fef14226062b409d87d79c8835938855": 2, "bb68df2a1d204f73844422065f372634": 5, "7aa58ad568df4350a97febd22a27ae63": 5 }, { "id": "61b350ee2ad8413093d88ad806e7d9e5", "trainPlanId": null, "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "表达能力", "evaluateMode": 0, "star": 4, "comments": null, "personId": "2934d0828a37beba5be29472df8137c4", "personName": "陈昌明", "evaluateTime": "2023-11-27 17:50:59", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null, "evaluateValueItem": [ { "id": "61b350ee2ad8413093d88ad806e7d9e5", "trainPlanId": "e11052108ed4401bbccffb701542f69f", "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "表达能力", "evaluateItemId": "7aa58ad568df4350a97febd22a27ae63", "evaluateMode": 0, "star": 4, "comments": null, "personId": "2934d0828a37beba5be29472df8137c4", "personName": "陈昌明", "evaluateTime": "2023-11-27T09:50:59.000+00:00", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null }, { "id": "c8431c3e641c4c68a8d69b0e5f5e9baf", "trainPlanId": "e11052108ed4401bbccffb701542f69f", "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "授课水平", "evaluateItemId": "fef14226062b409d87d79c8835938855", "evaluateMode": 0, "star": 3, "comments": null, "personId": "2934d0828a37beba5be29472df8137c4", "personName": "陈昌明", "evaluateTime": "2023-11-27T09:50:59.000+00:00", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null }, { "id": "cb182da5acb8490dbb20c632ce0af6d8", "trainPlanId": "e11052108ed4401bbccffb701542f69f", "trainApplyId": "e11052108ed4401bbccffb701542f69f", "trainName": "安保第八期安全培训", "trainCategory": 4, "trainUserId": null, "trainerName": "林林", "evaluateItemName": "专业知识", "evaluateItemId": "bb68df2a1d204f73844422065f372634", "evaluateMode": 0, "star": 2, "comments": null, "personId": "2934d0828a37beba5be29472df8137c4", "personName": "陈昌明", "evaluateTime": "2023-11-27T09:50:59.000+00:00", "userDeptId": null, "userDeptName": "安保部", "anonymousFlag": 0, "trainDuration": null } ], "7aa58ad568df4350a97febd22a27ae63": 4, "fef14226062b409d87d79c8835938855": 3, "bb68df2a1d204f73844422065f372634": 2 } ]
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/17861576.html