export default {
data() {
return {
tableData: [
{
id: 1,
name: 111,
amount1: 1,
amount2: 2,
},
{
id: 1,
name: 111,
amount1: 1,
amount2: 3,
},
{
id: 1,
name: 222,
amount1: 2,
amount2: 2,
},
{
id: 4,
name: 111,
amount1: 1,
amount2: 4,
},
{
id: 3,
name: 222,
amount1: 3,
amount2: 3,
},
{
id: 3,
name: 222,
amount1: 3,
amount2: 3,
},
{
id: 3,
name: 222,
amount1: 3,
amount2: 3,
},
],
spanArr: []
}
},
mounted() {
let contactDot = 0;
this.tableData.forEach((item, index) => {
//遍历tableData数据,给spanArr存入一个1,第二个item.id和前一个item.id是否相同,相同就给
//spanArr前一位加1,spanArr再存入0,因为spanArr为n的项表示n项合并,为0的项表示该项不显示,后面有spanArr打印结果
if (index === 0) {
this.spanArr.push(1)
} else {
if (item.id === this.tableData[index - 1].id) {
this.spanArr[contactDot] += 1;
this.spanArr.push(0)
} else {
contactDot = index
this.spanArr.push(1)
}
}
})
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
console.log(row, column, rowIndex, columnIndex);
//rowIndex表示当前行号,从0开始,合计是第6行
if (rowIndex !== 6) {
//columnIndex表示当前列号,这里处理ID,姓名,数值2
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
const _row = this.spanArr[rowIndex]
console.log(_row, 'row');
const _col = _row > 0 ? 1 : 0;
//该形式为行合并
return {
rowspan: _row,
colspan: _col
}
}
} else if (rowIndex == 6) {
//处理合计,[1,2]表示合并1行2列,[0,0]表示改行不显示
if (columnIndex === 0) {
//定位到6行0列的ID,告诉该单元格合并1行2列
return [1, 2]
} else if (columnIndex === 1) {
//定位到6行1列的姓名,告诉该单元格不显示
return [1, 2]
}
}
},
}
}