要合并的列
['htbm','htmc','hetd','hetdws','yjs']
一般的合并,不带逻辑,直接就把各自列对应的相同名字的列合并了,如下所示,不是合同的数据,值一样,直接给合并了
加上逻辑区分后的合并,会依次判断前面的字段一致后才合并后面的字段,效果图如下:
实现思路:
1、配置要合并的字段
:mergeFields="['htbm','htmc','hetd','hetdws','yjs']"
2、实现vxe table或者grid的合并方法
:span-method="mergeRowMethod"
3、具体mergeRowMethod的实现方法如下
// 通用行合并函数(将相同多列数据合并为一行)
mergeRowMethod({ row, _rowIndex, column, visibleData }) {
const fields = this.mergeFields;
if (fields.length == 0) {
return;
}
const cellValue = row[column.property];
if (
cellValue != undefined &&
cellValue != null &&
fields.includes(column.property)
) {
const prevRow = visibleData[_rowIndex - 1];
let nextRow = visibleData[_rowIndex + 1];
//if (prevRow && prevRow[column.property] === cellValue) {
if (prevRow && this.checkMergeFields(row, prevRow, column.property)) {
return { rowspan: 0, colspan: 0 };
} else {
let countRowspan = 1;
//while (nextRow && nextRow[column.property] === cellValue) {
while (nextRow && this.checkMergeFields(row, nextRow, column.property)) {
nextRow = visibleData[++countRowspan + _rowIndex];
}
if (countRowspan > 1) {
return { rowspan: countRowspan, colspan: 1 };
}
}
}
},
//循环判断前面的列,如果值不一样的话就不合并
checkMergeFields(row, nextRow, property) {
var ret = true;
for (var i = 0; i < this.mergeFields.length; i++) {
var field = this.mergeFields[i];
if (nextRow[field] != row[field]) {
ret = false;
break;
}
if (field == property) {
break;
}
}
return ret;
},