首页 > 其他分享 >el-table动态表头踩坑

el-table动态表头踩坑

时间：2023-11-28 11:55:25浏览次数：30  
标签：el 00 安保 表头 e11052108ed4401bbccffb701542f69f table null star evaluateItemName 

// 获取表格动态表头
    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
    }
]

 

标签：el,00,安保,表头,e11052108ed4401bbccffb701542f69f,table,null,star,evaluateItemName
From： https://www.cnblogs.com/LindaBlog/p/17861576.html

相关文章

  • .NET Core的CancellationToken集成使用
    它用于在执行长时间运行的操作时，通过发送取消请求来终止操作。CancellationToken可以与异步操作一起使用，以便在操作执行期间检查是否已请求取消。它提供了一种优雅的方式来处理取消操作，避免了长时间运行的操作无法中断的问题。varhttpContext=Cfg.HttpContext......
  • 基于WSAAsyncSelect模型的通信程序设计
    基于WSAAsyncSelect模型的通信程序设计一、问题描述编写Win32程序模拟实现基于WSAAsyncSelect模型的两台计算机之间的通信，要求编程实现服务器端与客户端之间双向数据传递。客户端向服务器端发送“请输出从1到1000内所有的质数”，服务器回应客户端给出结果。二、代码实现①CInit......
  • odigos 基于ebpf 以及OpenTelemetry 的分布式tracing 解决方案
    按照odigos官方的介绍是不需要进行代码的修改就可以实现方便的跨应用的分布式trace，目前支持java，python，net，go，js等语言目前看官方的介绍，安装是比较简单的（核心基于了k8s），目前官方文档比较清晰可以试用下说明目前开源分布式trace的工具是越来越多了，同时基于ebpf以及OpenTelemetry标......
  • 工作常用的EXCEL公式 | 考勤上下班时间统计
    需求：统计考勤上下班时间，比如：8:13上班打卡，取值为8:30；9:40上班打卡，取值10:00。解决方法：上班时间：思路：当minute少于等于30分钟时，取30分钟，即为time（hour,30,0）当minute大于30分钟时，往后+30分钟，即为time（hour+1,0,0）下班时间：思路：当minute少于30分钟时，取小时上的时间，即为time（hour,......
  • NX二次开发 截图、向excel表格中插入图片 UF_DISP_create_framed_image
    简介：    NX二次开发截图、向excel表格中插入图片UF_DISP_create_framed_image截图：UF_DISP_create_framed_image插入图片intid=book->addPicture(L"F:\\ActionButton\\post_temp.bmp");sheet->setPicture(10,11,id);me.hpp内容：文章作者：里海......
  • Excel合并单元格的缺点解决方式
    背景99%的人在创建表格的一个标题，都喜欢使用合并单元格的功能但是由于使用Excel的合并单元格，在数据分析统计的时候出现了一些问题复制粘贴数据时，由于有合并单元格，不能直接复制粘贴移动整列的位置，不能快速移动使用VLOOKUP函数时，无法直接选中列区域，只能手动选中单元格区域......
  • Java8使用并行流(ParallelStream)注意事项
    本文转载自简书：https://www.jianshu.com/p/51c1d4f1bf84著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 Java8并行流ParallelStream和Stream的区别就是支持并行执行，提高程序运行效率。但是如果使用不当可能会发生线程安全的问题。Demo如下：1publics......
  • JQuery获取select点击option的data-*属性
    <optionvalue="33333"data-socketid="1111"data-numnew="22222">4444</option>$(document).on('change','#institute-select',function(){//这里是重点，使用attr来获取vari......
  • Webshell混淆免杀的一些思路
    1、简介为了避免被杀软检测到，黑客们会对Webshell进行混淆免杀。本文将介绍一些Webshell混淆免杀的思路，帮助安全人员更好地防范Webshell攻击。静态免杀是指通过对恶意软件进行混淆、加密或其他技术手段，使其在静态分析阶段难以被杀毒软件或安全防护产品所检测出来的方法。静态免杀......
  • Make Lexicographically Smallest Array by Swapping Elements
    MakeLexicographicallySmallestArraybySwappingElementsYouaregivena 0-indexed arrayof positive integers nums anda positive integer limit.Inoneoperation,youcanchooseanytwoindices i and j andswap nums[i] and nums[j] if |nums......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99