记录项目中遇到的问题:项目中数据返回的多个一样的id 根据id去合并单元格
data里面的数据
tableData: [ { cysG_BM: '12987122', jzR_MZH: '王小虎', cysj: '234', jzR_XM: '3.2', jyxM_JGDW: 10, }, { cysG_BM: '12987122', jzR_MZH: '王小虎', cysj: '165', jzR_XM: '4.43', jyxM_JGDW: 12, }, { cysG_BM: '12987124', jzR_MZH: '王小虎1', cysj: '324', jzR_XM: '1.9', jyxM_JGDW: 9, }, { cysG_BM: '12987123', jzR_MZH: '王小虎2', cysj: '621', jzR_XM: '2.2', jyxM_JGDW: 17, }, { cysG_BM: '12987123', jzR_MZH: '王小虎2', cysj: '539', jzR_XM: '4.1', jyxM_JGDW: 15, }, ],
// 使用计算属性对哪行需要合并进行处理
computed: {
tableDataColumn() {
const obj = {};
this.tableData.forEach((v, i) => {
const id = v.cysG_BM;
if (obj[id]) {
obj[id].push(i);
} else {
obj[id] = [];
obj[id].push(i);
}
});
return obj;
},
}
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 判断从哪行开始合并
if (columnIndex < 11) {
if (rowIndex > 0 && row.cysG_BM === this.tableData[rowIndex - 1].cysG_BM) {
return {
rowspan: 0,
colspan: 0,
};
} else {
const id = row.cysG_BM;
const rows = this.tableDataColumn[id];
const length = rows.length;
return {
rowspan: length,
colspan: 1,
};
}
}
},
效果: