ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

利用element-ui的表格实现复杂合并单元格之二

2022-01-13 18:02:54  阅读：151  来源： 互联网

标签：rateAmountLimit orgName opOrgName 单元格 element 20210930 ui opOrgId null


利用element-ui的表格实现复杂合并单元格之二

前言

哈哈哈哈哈哈，为什么是之二呢，因为以前还有一篇，第一篇合并单元格的时候只考虑了当前列需要合并的数量，不知道我在说啥是吧，那就算了。

效果图

效果图解读：监测主体相同的需要合并，交易对方是以监测主体相同为前提条件合并，上限金额是仅当为翰林汇的时候才需要合并。

在这里插入图片描述

实现代码

思路就是从头遍历到脚，比较一下当前的值和上一个值是否相同，for example，第一条数据的的监测主体是aaa，此时的数组为[1]，遍历的第二条数据和第一条比较是不是aaa，如果相同，那么此时的数组为[2,0]，第三条还相同的话，[3,0,0]，第四条不一样了，那么此时[3,0,0,1]，第五条和第四条一样，[3,0,0,2,0]，第六条和第五条不一样，[3,0,0,2,0,1]，第七条和第六条不一样，[3,0,0,2,0,1,1]，以此类推。。。。
数组的length和第几条是相同的哦，所以遍历下来数组的length和返回的长度是一样的哦，数组每一个元素就代表每一行需要合并的个数
需要注意的是element表格的 return { rowspan: 0,colspan: 0, }表示隐藏该单元格，return { rowspan: 1,colspan: 1, }表示合并一行一列

<template>
  <div class="table-wrap">
    <el-table
      :data="tableData"
      border
      :span-method="mergeTable"
      :row-class-name="setRowClassName"
      height="100%"
    >
      <el-table-column prop="orgName" label="监测主体" align="center"> </el-table-column>
      <el-table-column prop="opOrgName" label="交易对方" align="center"> </el-table-column>
      <el-table-column prop="tranSub" label="交易事项"> </el-table-column>
      <el-table-column prop="limitAmount" label="上限金额"></el-table-column>
    </el-table>
  </div>
</template>
<script>
  import data from "./data.json"
  export default {
    data() {
      return {
        tableData:[],
        orgNameArr : [], //监测主体合并数量的数组
        orgNamePos : 0,
        opOrgNameArr : [], //交易对方合并数量的数组
        opOrgNamePos : 0,
        limitAmountArr : [],//上限金额合并数量的数组
        limitAmountPos : 0,
        colorFlag : false, //表格以监测主体斑马纹上色
      };
    },
    methods: {
      mergeTable({ columnIndex,rowIndex }) {
        if (columnIndex === 0) {
          //第一列的合并方法,监测主体
          const _row_1 = this.orgNameArr[rowIndex];
          const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
          return {
            rowspan: _row_1,
            colspan: _col_1
          }
        } else if (columnIndex === 1) {
          //第二列的合并方法,交易对方
          const _row_2 = this.opOrgNameArr[rowIndex];
          const _col_2 = _row_2 > 0 ? 1 : 0;
          return {
            rowspan: _row_2,
            colspan: _col_2
          }
        }else if(columnIndex>=3){
          //第四列合并韩林贷的上线金额
          const _row_2 = this.limitAmountArr[rowIndex];
          const _col_2 = _row_2 > 0 ? 1 : 0;
          return {
            rowspan: _row_2,
            colspan: _col_2
          }
        }
      },

      merage(tableData) {
        //要合并的数组的方法
        this.merageInit();
        for (var i = 0; i < tableData.length; i++) {
          if (i === 0) {
            //第一行必须存在
            tableData[i].colorFlag = this.colorFlag
            this.orgNameArr.push(1);
            this.orgNamePos = 0;

            this.opOrgNameArr.push(1);
            this.opOrgNamePos = 0;

            this.limitAmountArr.push(1);
            this.limitAmountPos = 0;
          }
          else {
            // 判断当前元素与上一个元素是否相同 this.orgNamePos是this.orgNameArr内容的序号

            //监测主体
            if (tableData[i].orgName === tableData[i - 1].orgName) {
              tableData[i].colorFlag = this.colorFlag
              this.orgNameArr[this.orgNamePos] += 1;
              this.orgNameArr.push(0);
            } else {
              this.orgNameArr.push(1);
              this.orgNamePos = i;
              this.colorFlag = !this.colorFlag
              tableData[i].colorFlag = this.colorFlag
            }

            //交易对方
            if (tableData[i].opOrgName === tableData[i - 1].opOrgName && tableData[i].orgName === tableData[i - 1].orgName) {
              this.opOrgNameArr[this.opOrgNamePos] += 1;
              this.opOrgNameArr.push(0);
            } else {
              this.opOrgNameArr.push(1);
              this.opOrgNamePos = i;
            }

            if(tableData[i].orgName === '韩林贷' && tableData[i].orgName === tableData[i - 1].orgName){
              this.limitAmountArr[this.limitAmountPos] +=1;
              this.limitAmountArr.push(0)
            }else {
              this.limitAmountArr.push(1)
              this.limitAmountPos = i;
            }
          }
        }
      },
      merageInit() {
        //初始化合并行的数组
        this.orgNameArr = [];
        this.orgNamePos = 0;
        this.opOrgNameArr = [];
        this.opOrgNamePos = 0;
        this.limitAmountArr = [];
        this.limitAmountPos = 0;
        this.colorFlag = false;
      },
      setRowClassName({row}){
        return row.colorFlag?'blue_hang':'white_hang'
      }
    },
    mounted() {
      //data是请求回来的数据（以下的data是引进来的假数据，只为了看看效果的哈）
      this.merage(data)
      this.tableData = data
    },
  };
</script>
<style lang="scss" scoped>
  .table-wrap{
    width: 80%;
    height: 100%;
    ::v-deep .el-table {
      th{
        background:#E82323;
        color: #fff;
      }
      td{
        padding: 6px;
      }
    }
    ::v-deep .blue_hang{
      background: #F0F4FF;
    }
    ::v-deep .white_hang{
      background: #fff;
    }
    ::v-deep .el-table__body tr:hover>td{
      background-color:transparent !important;
    }
  }
</style>

数据格式

后端返回的数据一定要以下格式，并且需要合并的数据必须挨着放哦

[
  {
    "dataId": "1",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName": "华兴广电",
    "opOrgId": null,
    "opOrgName": "财务公司",
    "tranSub": "存款余额",
    "limitAmount": "985000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "2",
    "dataDtMon": "20210930",
    "orgId":null,
    "orgName": "华兴广电",
    "opOrgId": null,
    "opOrgName": "财务公司",
    "tranSub": "票据贴现总额",
    "limitAmount": "660000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "3",
    "dataDtMon": "20210930",
    "orgId":null,
    "orgName": "华兴广电",
    "opOrgId": null,
    "opOrgName": "财务公司",
    "tranSub": "其他财务服务收费",
    "limitAmount": "1500000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "4",
    "dataDtMon": "20210930",
    "orgId":null,
    "orgName": "华兴广电",
    "opOrgId": null,
    "opOrgName": "金服",
    "tranSub": "收取推广费",
    "limitAmount": "2640000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "5",
    "dataDtMon": "20210930",
    "orgId":null,
    "orgName": "科技（含财司）",
    "opOrgId": null,
    "opOrgName": "实业",
    "tranSub": "在财司存款",
    "limitAmount": "6000000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "6",
    "dataDtMon": "20210930",
    "orgId":null,
    "orgName": "科技（含财司）",
    "opOrgId": null,
    "opOrgName": "实业",
    "tranSub": "财司向实业提供授信",
    "limitAmount": "6000000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "7",
    "dataDtMon": "20210930",
    "orgId":null,
    "orgName": "科技（含财司）",
    "opOrgId": null,
    "opOrgName": "实业",
    "tranSub": "财司收取的利息",
    "limitAmount": "150000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "8",
    "dataDtMon": "20210930",
    "orgId":null,
    "orgName": "科技（含财司）",
    "opOrgId": null,
    "opOrgName": "实业",
    "tranSub": "财司支付的利息",
    "limitAmount": "100000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "9",
    "dataDtMon": "20210930",
    "orgId":null,
    "orgName": "科技（含财司）",
    "opOrgId": null,
    "opOrgName": "实业",
    "tranSub": "财司提供服务的收费",
    "limitAmount": "100000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "10",
    "dataDtMon": "20210930",
    "orgId":null,
    "orgName": "科技（含财司）",
    "opOrgId": null,
    "opOrgName": "实业",
    "tranSub": "开展保理业务",
    "limitAmount": "2500000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "11",
    "dataDtMon": "20210930",
    "orgId":null,
    "orgName": "科技（含财司）",
    "opOrgId": null,
    "opOrgName": "实业",
    "tranSub": "实业付科技的金融服务费用",
    "limitAmount": "170000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "12",
    "dataDtMon": "20210930",
    "orgId":null,
    "orgName": "科技（含财司）",
    "opOrgId": null,
    "opOrgName": "实业",
    "tranSub": "科技付实业的金融服务费用",
    "limitAmount": "170000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "13",
    "dataDtMon": "20210930",
    "orgId":null,
    "orgName": "韩林贷",
    "opOrgId": null,
    "opOrgName": "科技",
    "tranSub": "借款（直接借款）",
    "limitAmount": "10031000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "14",
    "dataDtMon": "20210930",
    "orgId":null,
    "orgName": "韩林贷",
    "opOrgId": null,
    "opOrgName": "科技",
    "tranSub": "存款",
    "limitAmount": "10031000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "15",
    "dataDtMon": "20210930",
    "orgId":null,
    "orgName": "韩林贷",
    "opOrgId": null,
    "opOrgName": "科技",
    "tranSub": "接受集团担保",
    "limitAmount": "10031000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "16",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"韩林贷",
    "opOrgId": null,
    "opOrgName": "科技",
    "tranSub": "接受对方为公司及子公司提供的金融及资金管理服务而支付的费用",
    "limitAmount": "10031000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "17",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"通力",
    "opOrgId": null,
    "opOrgName": "财资公司",
    "tranSub": "存款",
    "limitAmount": "840000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": "港币  ",
    "limitFlag": null
  },
  {
    "dataId": "18",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"通力",
    "opOrgId": null,
    "opOrgName": "财资公司",
    "tranSub": "融资及其他财务服务收费",
    "limitAmount": "4200000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": "港币  ",
    "limitFlag": null
  },
  {
    "dataId": "19",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"电子",
    "opOrgId": null,
    "opOrgName": "财资公司",
    "tranSub": "存款",
    "limitAmount": "1791000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": "港币  ",
    "limitFlag": null
  },
  {
    "dataId": "20",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"电子",
    "opOrgId": null,
    "opOrgName": "实业",
    "tranSub": "向实业提供贷款服务",
    "limitAmount": "3500000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": "港币  ",
    "limitFlag": null
  },
  {
    "dataId": "21",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"电子",
    "opOrgId": null,
    "opOrgName": "实业",
    "tranSub": "保理业务",
    "limitAmount": "591000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": "港币  ",
    "limitFlag": null
  },
  {
    "dataId": "22",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"电子",
    "opOrgId": null,
    "opOrgName": "财务公司",
    "tranSub": "结算类存款",
    "limitAmount": null,
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": "豁免披露    ",
    "limitFlag": null
  },
  {
    "dataId": "23",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"电子",
    "opOrgId": null,
    "opOrgName": "财务公司",
    "tranSub": "非结算类存款余额",
    "limitAmount": null,
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": "市值5%以内（最低***）        ",
    "limitFlag": null
  },
  {
    "dataId": "24",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"电子",
    "opOrgId": null,
    "opOrgName": "财务公司",
    "tranSub": "有追索贴现",
    "limitAmount": null,
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": "豁免披露    ",
    "limitFlag": null
  },
  {
    "dataId": "25",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"电子",
    "opOrgId": null,
    "opOrgName": "财务公司",
    "tranSub": "无追索贴现",
    "limitAmount": null,
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": "市值5%以内（最低***）        ",
    "limitFlag": null
  },
  {
    "dataId": "26",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"电子",
    "opOrgId": null,
    "opOrgName": "金融机构",
    "tranSub": "投资理财",
    "limitAmount": null,
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": "市值5%以内（最低***）        ",
    "limitFlag": null
  },
  {
    "dataId": "27",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"普林",
    "opOrgId": null,
    "opOrgName": "财司",
    "tranSub": "存款",
    "limitAmount": "200000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "28",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"普林",
    "opOrgId": null,
    "opOrgName": "财司",
    "tranSub": "授信",
    "limitAmount": "300000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "29",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"普林",
    "opOrgId": null,
    "opOrgName": "财司",
    "tranSub": "衍生品",
    "limitAmount": "100000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "30",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"中环",
    "opOrgId": null,
    "opOrgName": "财司",
    "tranSub": "存款",
    "limitAmount": "2000000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  },
  {
    "dataId": "31",
    "dataDtMon": "20210930",
    "orgId": null,
    "orgName":"中环",
    "opOrgId": null,
    "opOrgName": "财司",
    "tranSub": "授信",
    "limitAmount": "3000000000",
    "maxAmountMon": null,
    "rateAmountLimit": null,
    "remarks": null,
    "limitFlag": null
  }
]

标签：rateAmountLimit,orgName,opOrgName,单元格,element,20210930,ui,opOrgId,null
来源： https://blog.csdn.net/weixin_48142432/article/details/120948159

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有