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