ui框架官网:https://www.antdv.com/components/table-cn/
弄了差不多一天,哎,终于可以了;
需求:以下表格中红框部分的数据虽然一样,但因为“等级”不同,不能做合并;
方案:
data部分:
temp:{},//当前重复的值,支持多列
filBonusColumns:[ { title: '等级', dataIndex: 'dengji', align: 'center', customRender: (value, row, index) => { const obj = { children: value, attrs: {}, }; obj.attrs.rowSpan = this.mergeCellKey(value, this.filBonusInfo, 'dengji','filBonusInfo'); return obj; }, }, { title: '分红比例', dataIndex: 'bonusBili', align: 'center', customRender: (value, row, index) => { const obj = { children: value, attrs: {}, }; obj.attrs.rowSpan = this.mergeCellKey(row.dengji, this.integralBonusInfo, '','filBonusInfo','dengji'); return obj; }, },
//................... ]
methods部分:
/* * 单元格合并 * text 当前单元格内容 * array 表格所有数据 * columns 当前单元格对应的属性名 * arrayName 为了区别 同一个页面的不同表单中有同一个属性值 * relateColumns 若合并的单元格是根据另一列的合并情况做的合并,使用此参数 * */ mergeCellKey(text, array, columns, arrayName, relateColumns){ let that = this; let i = 0;
// 若有依赖的单元格 if(relateColumns){
// 'relate'用来区分“当前列”和“依赖列” if (text !== that.temp[arrayName + 'relate' + relateColumns]) { that.temp[arrayName + 'relate' + relateColumns] = text for(let index=0;index<array.length;index++){
// 依赖列的当前单元格数据 === 已经存储的值,则i+1 if(array[index][relateColumns] === that.temp[arrayName + 'relate' + relateColumns]){ i += 1; } } } }else{ if (text !== that.temp[arrayName + columns]) { that.temp[arrayName + columns] = text for(let index=0;index<array.length;index++){ if(array[index][columns] === that.temp[arrayName + columns]){ i += 1; } } } } return i } }