记录一下 ，先放图
html:
<el-table
:data="tableData"
:span-method="objectSpanMethod"
:height="tableHeight"
border
>
....
</el-table>在data中定义
js:
methods: {
// 处理数据
initData(data) {
this.tableData = data.data;
if (data.data.length === 0 && this.idx <= 7) {
let pastDay = this.getNextDate(this.date, -1);
let pastDayNum = pastDay.split('-')[2];
this.date = pastDay;
this.idx ++;
this.dateNum = parseInt(pastDayNum);
this.getEleData();
}
this.getListDataForrowspanBasin(data.data)
},
getListDataForrowspanBasin(data){
console.log(data)
this.rowspanBasin = [];
this.rowspanRiver = [];
this.posBasin = 0;
this.posRiver = 0;
this.rowspanCompany = [];
this.posCompany = 0;
for (var i = 0; i < data.length ; i++) {
if (i === 0) {
this.rowspanBasin.push(1);
this.posBasin = 0
this.rowspanRiver.push(1);
this.posRiver = 0
this.rowspanCompany.push(1);
this.posCompany = 0;
} else {
if (data[i].BASIN_NAME === data[i - 1].BASIN_NAME) {
// 如果BASIN_NAME相等就累加，并且push 0
this.rowspanBasin[this.posBasin] += 1
this.rowspanBasin.push(0)
} else {
// 不相等push 1
this.rowspanBasin.push(1)
this.posBasin = i;
}
if (data[i].RIVER_NAME === data[i - 1].RIVER_NAME) {
// 如果RIVER_NAME相等就累加，并且push 0
this.rowspanRiver[this.posRiver] += 1
this.rowspanRiver.push(0)
} else {
this.rowspanRiver.push(1)
this.posRiver = i
}
if (data[i].REGION_NAME === data[i - 1].REGION_NAME) {
// 如果REGION_NAME相等就累加，并且push 0
this.rowspanCompany[this.posCompany] += 1
this.rowspanCompany.push(0)
} else {
this.rowspanCompany.push(1)
this.posCompany = i
}
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 页面列表上 表格合并行 -> 第几列(从0开始)
if (columnIndex === 0) {
const rowBasin = this.rowspanBasin[rowIndex]
const colBasin = rowBasin > 0 ? 1 : 0
return {
rowspan: rowBasin,
colspan: colBasin
}
}
if (columnIndex === 1) {
const rowRiver = this.rowspanRiver[rowIndex]
const colRiver = rowRiver > 0 ? 1 : 0
return {
rowspan: rowRiver,
colspan: colRiver
}
}
if (columnIndex === 3) {
const rowCompany = this.rowspanCompany[rowIndex]
const colCompany = rowCompany > 0 ? 1 : 0
return {
rowspan: rowCompany,
colspan: colCompany
}
}
},
}