其他分享
首页 > 其他分享> > 利用element-ui的表格实现复杂合并单元格之二

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

作者:互联网

利用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