记录element 表格中合并相同项的某个单元格

数据格式
list: [{
date: ‘2016-05-02’,
name: ‘王小虎1’,
address: ‘上海市普陀区金沙江路 1518 弄’,
}, {
date: ‘2016-05-03’,
name: ‘王小虎1’,
address: ‘上海市普陀区金沙江路 1519 弄’,
}, {
date: ‘2016-05-04’,
name: ‘王小虎1’,
address: ‘上海市普陀区金沙江路 1520 弄’,
}, {
date: ‘2016-05-05’,
name: ‘王小虎1’,
address: ‘上海市普陀区金沙江路 1521 弄’,
}],
}, {
date: ‘2016-05-04’,
name: ‘王小虎2’,
address: ‘上海市普陀区金沙江路 1517 弄’,
list: [{
date: ‘2016-05-02’,
name: ‘王小虎2’,
address: ‘上海市普陀区金沙江路 1517 弄’,
}, {
date: ‘2016-05-02’,
name: ‘王小虎2’,
address: ‘上海市普陀区金沙江路 1517 弄’,
}],
}, {
date: ‘2016-05-01’,
name: ‘王小虎3’,
address: ‘上海市普陀区金沙江路 1519 弄’,
list: [],
}, {
date: ‘2016-05-03’,
name: ‘王小虎4’,
address: ‘上海市普陀区金沙江路 1516 弄’,
list: [],
}];
query() {
this.list = [{
date: ‘2016-05-02’,
name: ‘’,
address: ‘上海市普陀区金沙江路 1518 弄’,
list: [{
date: ‘2016-05-02’,
name: ‘王小虎1’,
address: ‘上海市普陀区金沙江路 1518 弄’,
}, {
date: ‘2016-05-03’,
name: ‘王小虎1’,
address: ‘上海市普陀区金沙江路 1519 弄’,
}, {
date: ‘2016-05-04’,
name: ‘王小虎1’,
address: ‘上海市普陀区金沙江路 1520 弄’,
}, {
date: ‘2016-05-05’,
name: ‘王小虎1’,
address: ‘上海市普陀区金沙江路 1521 弄’,
}],
}, {
date: ‘2016-05-04’,
name: ‘王小虎2’,
address: ‘上海市普陀区金沙江路 1517 弄’,
list: [{
date: ‘2016-05-02’,
name: ‘王小虎2’,
address: ‘上海市普陀区金沙江路 1517 弄’,
}, {
date: ‘2016-05-02’,
name: ‘王小虎2’,
address: ‘上海市普陀区金沙江路 1517 弄’,
}],
}, {
date: ‘2016-05-01’,
name: ‘王小虎3’,
address: ‘上海市普陀区金沙江路 1519 弄’,
list: [],
}, {
date: ‘2016-05-03’,
name: ‘王小虎4’,
address: ‘上海市普陀区金沙江路 1516 弄’,
list: [],
}];
数据整理
this.list.forEach((res) => {
if (res.list.length === 0) {
this.tableData.push(res);
} else {
res.list.forEach((item) => {
this.tableData.push(item);
});
}
});
console.log();
this.getSpanArr(this.tableData);
},
// 标记那些需要合并
getSpanArr(data) {
this.spanArr = [];
this.pos = 0;
// 2 合并 1.不变 0隐藏
// eslint-disable-next-line no-plusplus
for (let i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0;
} else {
// 判断当前元素与上一个元素是否相同
// eslint-disable-next-line no-lonely-if
if (data[i].name === data[i - 1].name) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
console.log(this.spanArr, this.pos);
console.log(‘194’, this.spanArr);
},
合并单元格
objectSpanMethod({
row, column, rowIndex, columnIndex,
}) {
// row.channelInfoDtoList.length 这个值是通道的length，
// 就是需要合并的行数 合并行或列的计算方法。方法的参数是一个对象，里面包含
// 当前行row、
// 当前列column、
// 当前行号rowIndex、
// 当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
if (columnIndex === 0) {
// [0,0] 表示这一行不显示， [2,1]表示行的合并数
const row = this.spanArr[rowIndex];
const col = row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},