随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

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   小虾米吖~  阅读(136)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
历史上的今天:
2018-11-28 页面属性、窗口属性、母版的使用

点击右上角即可分享
微信分享提示