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
    }
]

 

posted on 2023-11-28 11:51  小虾米吖~  阅读(126)  评论(0编辑  收藏  举报