问题遇到的现象和发生背景
我是用下面这个方法合并单元格的,但是连下面不同类的也合并了
<template>
<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
<el-table-column prop="id" label="ID" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column prop="amount1" label="数值 1(元)">
</el-table-column>
<el-table-column prop="amount2" label="数值 2(元)">
</el-table-column>
<el-table-column prop="amount3" label="数值 3(元)">
</el-table-column>
</el-table>
</template>
<script>
export default {
name: "OperateAndPriorityPrint",
data() {
return {
rowCount: 0,
colFields: ['id', 'name','amount1','amount2','amount3'],
spanArr: [],
tableData: [{
id: '1',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '1',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 10
}, {
id: '2',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '2',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '2',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
};
},
mounted: function () {
// 组件创建完后获取数据,
// 此时 data 已经被 observed 了
this.getSpanArr();
},
methods: {
/**
* 分析每一列,找出相同的
* @param data
*/
getSpanArr() {
for (let i = 0; i < this.tableData.length; i++) {
let row = i;
// let col = i % this.colCount;
if (row === 0) {
for (let j = 0; j < this.colFields.length; j++) {
this.spanArr[i * this.colFields.length + j] = {
rowspan: 1,
colspan: 1
};
}
} else {
for (let j = 0; j < this.colFields.length; j++) {
// 当前和上一次的一样
if (this.tableData[row][this.colFields[j]] === this.tableData[row - 1][this.colFields[j]]) {
let beforeItem = this.spanArr[(row - 1) * this.colFields.length + j];
this.spanArr[row * this.colFields.length + j] = {
rowspan: 1 + beforeItem.rowspan,
colspan: 1
};
beforeItem.rowspan = 0;
beforeItem.colspan = 0;
}else{
this.spanArr[row * this.colFields.length + j] = {
rowspan: 1,
colspan: 1
};
}
}
}
}
// 对数据进行倒序
let stack = [];
for (let i=0;i<this.colFields.length;i++){
for (let j=0;j<this.tableData.length;j++){
console.log("i="+i + " j="+j);
// i 表示列 j表示行
if(j === 0){
if(this.spanArr[j*this.colFields.length + i].rowspan === 0){
stack.push(this.spanArr[j*this.colFields.length + i]);
}
}else{
if(this.spanArr[j*this.colFields.length + i].rowspan === 0){
stack.push(this.spanArr[j*this.colFields.length + i]);
}else{
stack.push(this.spanArr[j*this.colFields.length + i]);
while (stack.length > 0){
let pop = stack.pop();
let len = stack.length;
this.spanArr[(j-len)*this.colFields.length + i] = pop;
}
}
}
}
}
},
objectSpanMethod({row, column, rowIndex, columnIndex}) {
return this.spanArr[rowIndex * this.colFields.length + columnIndex];
}
}
}
</script>
<style scoped>
</style>
怎么解决,才能达到下面的效果呢