前几天遇到一个需要合并行的表格，需求如图
Image 006.png
合并行分两种，一种是后端分页，一种是前端分页
一、先来讲后端分页
element中的表格自带一个属性 span-method
<el-table
:data="tableData.slice((page - 1) * pageSize, page * pageSize)"
border
style="width: 100%"
:max-height="tableHeight"
class="tableRowHeight"
:cell-style="{ 'font-size': '8px' }"
:header-cell-style="{ 'font-size': '8px' }"
:span-method="arraySpanMethod"
>
// 合并行功能
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
//这里表示第一列，rowspan大于等于1就返回colspan为1，rowspan为0就返回colspan为0
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
} else {
return {
rowspan: 1,
colspan: 1,
};
}
},
此方法中{ rowspan: 5,colspan: 1 }，返回的如下图，当前列的一格对应右边列的5格
Image 005.png
我们就只需要对数据处理，生成一个能够让span-method处理合并行的数据列表
// 表格行合并的数据处理
dealWithData() {
const result = [];
let pos = 0;
console.log("this.tableData",this.tableData);
const data = this.tableData;
for (let i = 0; i < data.length; i++) {
if (i === 0) {
// 如果是第一条记录（即索引是0的时候），向数组中加入１
result.push(1);
pos = 0;
} else {
// 这里bitCityName 是数据里用到的字段，自行修改
if (data[i].bitCityName === data[i - 1].bitCityName) {
// 如果相等就累加，并且push 0（表示删除后面的格）
result[pos] += 1;
result.push(0);
} else {
// 不相等push 1
result.push(1);
pos = i;
}
}
}
this.spanArr = result;
console.log("this.spanArr", this.spanArr, "pos", result[pos], pos);
},
以上就是后端分页的处理方式，利用接口查询回来的数据进行处理后再渲染
如果是用的前端分页的方法，道理也很简单，先用slice方法进行数组分割
:data="tableData.slice((page - 1) * pageSize, page * pageSize)"
每换一次页或者页码再把当前分割后的tableData再调用上面所示的dealWithData()方法再进行一次数据处理再显示出来就好了
以上是我使用的方法，如果有大佬有更好的方法希望可以提出来
谢谢
