表格合并分为行合并和列合并
element表格配置方法span-method
:span-method="arraySpanMethod"
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
//逻辑部分
}
1)行合并(值相同的合并)
// 合并行
const _row = this.rowObj[name][rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
//通过方法rowspan设置rowObj的值
rowspan(){
//每次调用清空数据
this.rowObj = {};
this.positionObj = {};
this.columns.forEach((value, i) => {
this.rowObj[value] = [];
this.positionObj[value] = 0;
this.tableDatas.forEach((item, index) => {
if (index === 0) {
this.rowObj[value].push(1);
this.positionObj[value] = 0;
} else {
if (
this.tableDatas[index][value] ===
this.tableDatas[index - 1][value]
) {
this.rowObj[value][this.positionObj[value]] += 1;
this.rowObj[value].push(0);
} else {
this.rowObj[value].push(1);
this.positionObj[value] = index;
}
}
});
});
}
2)列合并(空值位置将被后面的内容区域合并)
// 列合并
let _columnIndex;
let status1 = false; //逻辑联结词
let status2 = false; //param_TYPE
let name = column.property;
this.columns.forEach((cur, index) => {
if (!row[cur] && name == cur) {
status1 = true;
} else if (!row[cur] && name == "param_TYPE") {
status2 = true;
_columnIndex = this.getCol(row, columnIndex);
}
});
if (status1) {
return {
rowspan: 0,
colspan: 0,
};
} else if (status2) {
return {
rowspan: 1,
colspan: _columnIndex,
};
}