Vxe Table/Grid 单元格分组合并
要合并的列
[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; },
下一篇:
时序数据库InfluxDB快速入门使用