首页 > 其他分享 >el-table 表头竖向排列实现 升级版

el-table 表头竖向排列实现 升级版

时间：2023-03-25 16:33:06浏览次数：39  
标签：gradeStatus el evaluatorWithItemId evaluaterName 竖向 gradeStatusDesc 表头 appointme

 

  <div v-for="(item, index) in allItems" :key="index" class="mb20">
        <div class="arrangeTitle mb10 mt10">
          <headLine>
            <div class="title">
              <div class="fb cor3" style="font-size: 20px">
                {{ item.itemName }}
              </div>
            </div>
          </headLine>
        </div>
        <div class="mt10 mb10"></div>

        <!-- 系统外 -->
        <div class="my-self-table">
          <el-table v-if="false" :data="item.evaluatorDtos" border>
            <el-table-column
              prop="evaluaterName"
              label="评价导入人"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="appointmentTypeName"
              label="职位"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="gradeStatusDesc"
              label="评价进度"
              align="center"
            >
            </el-table-column>
          </el-table>
          <div v-if="item.evaluatorDtos && item.evaluatorDtos.length > 0">
            <!-- tableData
              :data="getValuesNew(item.evaluatorDtos)" -->
            <el-table
              style="width: 100%"
              :data="getValuesNew(item.evaluatorDtos)"
              :show-header="false"
              :cell-style="cellStyle"
              border
            >
              <el-table-column
                v-for="(item, index) in getHeadersNew(item.evaluatorDtos)"
                :key="index"
                :prop="item"
                min-width="150"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
     allItems: [],
      headers: [
        {
          prop: 'appointmentTypeName',
          // propObj: 'objName',
          label: '先进企业',
        },
        {
          prop: 'gradeStatusDesc',
          label: '进步企业',
        },

      ],
  computed: {

    getHeadersNew () {
      return newTable => {
        return newTable.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
      }
    },
    getValuesNew () {

      return newTable => {
        console.log(this.headers)
        console.log(newTable)
        return this.headers.map(item => {
          console.log(item)
          let tableEnd = newTable.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: item.propObj ? cur[item.prop][item.propObj] : cur[item.prop] }), { 'title': item.label, });
          return tableEnd
        });
      }

    }
  },
this.allItems = [
        {
          "evaluationObjectId": "597EDCC7DC6242DB8C22D77DA0F7F0D3",
          "itemId": "6F1B901CAE01474F807F5DA209B99871",
          "itemName": "测测",
          "scoreOriginType": 1,
          "scoreOriginTypeDesc": "本系统内评分",
          "evaluatorDtos": [
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼1",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "二般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼2",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            }
          ]
        }, {
          "evaluationObjectId": "597EDCC7DC6242DB8C22D77DA0F7F0D3",
          "itemId": "6F1B901CAE01474F807F5DA209B99871",
          "itemName": "测测2",
          "scoreOriginType": 1,
          "scoreOriginTypeDesc": "本系统内评分",
          "evaluatorDtos": [
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            }
          ]
        }, {
          "evaluationObjectId": "597EDCC7DC6242DB8C22D77DA0F7F0D3",
          "itemId": "6F1B901CAE01474F807F5DA209B99871",
          "itemName": "测测2",
          "scoreOriginType": 1,
          "scoreOriginTypeDesc": "本系统内评分",
          "evaluatorDtos": [
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            },
            {
              "evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
              "evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
              "evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
              "evaluaterName": "余炼炼",
              "scoredWeight": 100,
              "raterGroupName": "先进企业",
              "appointmentType": "100008",
              "appointmentTypeName": "一般技术人员",
              "gradeStatus": 2,
              "gradeStatusDesc": "已提交"
            }
          ]
        }
      ]

 

标签：gradeStatus,el,evaluatorWithItemId,evaluaterName,竖向,gradeStatusDesc,表头,appointme
From： https://www.cnblogs.com/dianzan/p/17254999.html

相关文章

  • 帮师姐把100个Excel中符合条件的数据，汇总到1个Excel里
    大家好，这里是程序员晚枫，B站也叫这个名~后台收到一个读者需求：人事部门有最近3年每个月全公司的工资Excel文件，一共500多个。现在和1位员工有一件劳动纠纷，需要把这1位员工散......
  • EL表达式获取数据及细节
    EL表达式没有空指针异常、索引越界异常；EL表达式没有字符串的拼接；<%@pageimport="www.hw.demo.Student"%><%@pageimport="java.util.ArrayList"%><%@pageimpor......
  • delphi7 pas 文件底部有diagram是什么框如何编写
    在Delphi7中，pas文件底部的diagram是一个类图，用于显示在pas文件中定义的类及其关系。要编写类图，你需要使用Delphi的可视化建模工具，如ModelMakerTools或Mod......
  • el-table 表头竖向排列实现
     <el-tablestyle="width:100%":data="getValues":show-header="false":cell-style="cellStyle"b......
  • Sentinel 限流、熔断降级
    一、什么是Sentinel？随着微服务的流行，服务和服务之间的稳定性变得越来越重要。Sentinel以流量为切入点，从流量控制、熔断降级、系统负载保护等多个维度保护服务的稳定性。S......
  • Liunx 搭建 Elk 集群配置 之 kibana 搭建
    官网下载kibana只需要在node01机器上安装即可中文社区下载选择自己对应的版本即可我用的是kibana-7.4.0-linux-x86_64跟我的elasticsearch版本一致的。下载完上传解压即......
  • Liunx 搭建 Elk 集群配置 之 Logstash 搭建
    下载Logstash中文社区地址我的版本是logstash-7.11.0-linux-x86_64.tar.gz上传解压#解压命令tar-zxvflogstash-7.11.0-linux-x86_64.tar.gz-C/opt简单测试#到bin目......
  • elasticsearch 查看集群运行状态api （全部Cat命令合集以及返回参数解释）
    Cat的所有命令http://192.168.6.39:9201/_cat/_cat/allocation/_cat/shards/_cat/shards/{index}/_cat/master/_cat/nodes/_cat/tasks/_cat/indices/_cat/indices/......
  • IntelliJ IDEA 修改只读模式和可写模式
    可以在IntelliJIDEA对代码修改为只读模式。当你把一个源代码修改为只读模式的话，在右上角将会显示这个文件为只读的。如果你希望把这文件修改为可写的，可以直接......
  • IntelliJ IDEA 撤销和反撤销
    IntelliJIDEA中Ctrl+Z是撤销快捷键反撤销快捷键为：Ctrl+Shift+Z这个和Windows常用的快捷键不一样，有时候你可能会尝试使用Ctrl+Y，这个是没有办法反撤销的。......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99