效果
代码
通过span-method实现合并单元格
:span-method="rightSpanMethod" height='350px' style="width: 100%;" border>
data中定义数据spanArr: [],position: 0,//spanArr控制合并几行,position控制判断合并行相同时字段,spanArr中第position个数据是否合并一行
if (code=='200') {//此为获取要合并单元格的table数据,接口请求成功时,调用rowspan方法
this.userPowMgt=list
this.userPowForm.pageNum=pageNum
this.userPowForm.pageSize=pageSize
this.userPowForm.total=total
this.userPowLoading=false
this.spanArr = []
this.rowspan();
}
rightSpanMethod({row, column, rowIndex, columnIndex}){
//通过判断某一列是否需要合并相同的添加不同if条件
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];//spanArr为控制合并几行的数组eg:[4, 0, 0, 0, 4, 0, 0, 0, 2, 0]
const _col = _row > 0 ? 1 : 0;//合并的行数大于0那就只有一列,小于0就列数为0,相当于没了
return {
rowspan: _row,
colspan: _col
};
}
if (columnIndex === 1) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
rowspan() {
this.userPowMgt.forEach((item, index) => {
if (index === 0) {//首次遍历获取得到的数据,将第一行数据控制合并行数的数组push(1),表示合并一行
this.spanArr.push(1);
this.position = 0;
} else {
if (this.userPowMgt[index].sDtsend === this.userPowMgt[index - 1].sDtsend) {
this.spanArr[this.position] += 1;//只要sDtsend(发放月份)字段相等,spanArr的第index个元素就加1表示合并一行
this.spanArr.push(0);//被合并的行要push(0)表示没了被合并了
} else {//直到某字段不等时,改变position值
this.spanArr.push(1);//push(1)是因为行不合并也是从1行开始
this.position = index;//等于index表示从不等的那一行序号开始从1往上加
}
}
});
},