element-ui中Table表格省市区合并单元格的方法实现

2020-06-13 10:40:06易采站长站整理

//把新的值,覆盖原本值,以防再次修改
row.originalRemake = row.remake
row.originalPublicS = row.publicSubsidy
row.originalProvinceS = row.provinceSubsidy
row.originalCityS = row.citySubsidy
this.$message({
message: 'The title has been edited',
type: 'success'
})
},
arraySpanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex === 0) {
//第一列的合并方法,省
const _row_1 = this.provinceArr[rowIndex];
const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
return {
rowspan: _row_1,
colspan: _col_1
}
} else if (columnIndex === 1) {
//第二列的合并方法,市
const _row_2 = this.cityArr[rowIndex];
const _col_2 = _row_2 > 0 ? 1 : 0;
return {
rowspan: _row_2,
colspan: _col_2
}
} else if (columnIndex === 2) {
//第三列的合并方法,区
const _row_3 = this.zoneArr[rowIndex];
const _col_3 = _row_3 > 0 ? 1 : 0;
return {
rowspan: _row_3,
colspan: _col_3
}
}
},
merage() {
//要合并的数组的方法
this.merageInit();
for (var i = 0; i < this.tableData.length; i++) {
if (i === 0) {
//第一行必须存在
this.provinceArr.push(1);
this.provincePos = 0;

this.cityArr.push(1);
this.cityPos = 0;
this.zoneArr.push(1);
this.zonePos = 0;
}
else {
// 判断当前元素与上一个元素是否相同 this.provincePos是provinceArr内容的序号

//省
if (this.tableData[i].province === this.tableData[i - 1].province) {
this.provinceArr[this.provincePos] += 1;
this.provinceArr.push(0);
} else {
this.provinceArr.push(1);
this.provincePos = i;
}

//市
if (this.tableData[i].city === this.tableData[i - 1].city && this.tableData[i].province === this.tableData[i - 1].province) {
this.cityArr[this.cityPos] += 1;
this.cityArr.push(0);
} else {
this.cityArr.push(1);
this.cityPos = i;
}

//区
if (this.tableData[i].zone === this.tableData[i - 1].zone && this.tableData[i].city === this.tableData[i - 1].city && this.tableData[i].province === this.tableData[i - 1].province) {
this.zoneArr[this.zonePos] += 1;
this.zoneArr.push(0);
} else {
this.zoneArr.push(1);
this.zonePos = i;
}
}
}
},
merageInit() {
//初始化省市区的合并行的数组
this.provinceArr = [];
this.provincePos = 0;
this.cityArr = [];