Element UI El table table realizes dynamic merging of multiple columns

Zhou goldfish 2022-05-14 13:08:31 阅读数:666

elementuieltabletable

The effect is as shown in the picture ( Merge according to the previous column )

Core code

1、 stay <el-table> Insert... In the label span-method Merging method

:span-method="objectSpanMethod"

2、 Define the object that needs to store the merged item information rowMergeArrs、 A collection of items that need to merge Columns needMergeArr

needMergeArr: ["accName", "cloudTypeName", "crashAmount","creditAmount"], 

rowMergeArrs: [],

3、 stay created Get the data after table processing  

this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData); 

4、 Definition rowMergeHandle Method to handle table data

rowMergeHandle(arr, data) {
if (!Array.isArray(arr) && !arr.length) return false;
if (!Array.isArray(data) && !data.length) return false;
let needMerge = {};
arr.forEach((i, idx) => {
needMerge[i] = {
rowArr: [],
rowMergeNum: 0,
};
if (idx == 0) {
data.forEach((item, index) => {
// The first data of the table is processed separately
if (index === 0) {
needMerge[i].rowArr.push(1);
needMerge[i].rowMergeNum = 0;
} else {
if (item[i] === data[index - 1][i]) {
needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
needMerge[i].rowArr.push(0);
} else {
needMerge[i].rowArr.push(1);
needMerge[i].rowMergeNum = index;
}
}
});
} else {
let firstRowArr = needMerge[arr[0]].rowArr;
let firstRowArrDeal = [];
firstRowArr.forEach((item, index) => {
if (item > 0) {
firstRowArrDeal.push(index);
}
});
data.forEach((item, index) => {
let sign = false;
if (firstRowArrDeal.indexOf(index) > 0) {
needMerge[i].rowMergeNum = index;
sign = true;
}
// The first data of the table is processed separately
if (index === 0) {
needMerge[i].rowArr.push(1);
needMerge[i].rowMergeNum = 0;
} else {
if (item[i] === data[index - 1][i]) {
if (sign) {
needMerge[i].rowArr.push(1);
} else {
needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
needMerge[i].rowArr.push(0);
}
} else {
needMerge[i].rowArr.push(1);
needMerge[i].rowMergeNum = index;
}
}
});
}
});
return needMerge;
},

4、 Definition objectSpanMethod Method

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
for(let res in this.needMergeArr){
if(this.needMergeArr[res] == column.property){
return this.mergeAction(column.property, rowIndex, columnIndex);
}
}
},

5、 Definition mergeAction Method to get the number of rows and list to be merged

mergeAction(val, rowIndex) {
let _row = this.rowMergeArrs[val].rowArr[rowIndex];
let _col = _row > 0 ? 1 : 0;
return [_row, _col];
},

6、tableData The simulated data are as follows

tableData: [
{
id: 1,
cloudTypeName: " Alibaba cloud ",
accName: "glodon_gm1",
crashAmount: 0.1,
creditAmount: 240000.0,
availaleAmount: 83548.66,
},
{
id: 2,
cloudTypeName: " Alibaba cloud ",
accName: "glodon_gm1",
crashAmount: 0.0,
creditAmount: 150000.0,
availaleAmount: 83548.66,
},
{
id: 3,
cloudTypeName: " Alibaba cloud ",
accName: "glodon_gm1",
crashAmount: 0.0,
creditAmount: 150000.0,
availaleAmount: 53045.89,
},
{
id: 4,
cloudTypeName: " Alibaba cloud ",
accName: "glodon_gm4",
crashAmount: 0.0,
creditAmount: 1351000.0,
availaleAmount: 1244354.9,
},
{
id: 5,
cloudTypeName: " Alibaba cloud ",
accName: "glodon_gm4",
crashAmount: 0.0,
creditAmount: 0.0,
availaleAmount: -5033739.0,
},
{
id: 5,
cloudTypeName: " Alibaba cloud ",
accName: "glodon_gm5",
crashAmount: 0.0,
creditAmount: 0.0,
availaleAmount: -5033739.0,
},
{
id: 5,
cloudTypeName: " Alibaba cloud ",
accName: "glodon_gm5",
crashAmount: 0.0,
creditAmount: 0.0,
availaleAmount: -5033739.0,
},
],

 

Reference article :element-ui table Dynamic column merging -- Multiple columns are supported Open the box - smil、 chanting of scriptures - Blog Garden  

版权声明:本文为[Zhou goldfish]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/134/202205141254536931.html