前幾天遇到一個需要合并行的表格，需求如圖
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 }，返回的如下圖草冈，當(dāng)前列的一格對應(yīng)右邊列的5格
Image 005.png
我們就只需要對數(shù)據(jù)處理她奥，生成一個能夠讓span-method處理合并行的數(shù)據(jù)列表
// 表格行合并的數(shù)據(jù)處理
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的時候）瓮增，向數(shù)組中加入１
result.push(1);
pos = 0;
} else {
// 這里bitCityName 是數(shù)據(jù)里用到的字段，自行修改
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);
},
以上就是后端分頁的處理方式绷跑，利用接口查詢回來的數(shù)據(jù)進(jìn)行處理后再渲染
如果是用的前端分頁的方法，道理也很簡單凡资，先用slice方法進(jìn)行數(shù)組分割
:data="tableData.slice((page - 1) * pageSize, page * pageSize)"
每換一次頁或者頁碼再把當(dāng)前分割后的tableData再調(diào)用上面所示的dealWithData()方法再進(jìn)行一次數(shù)據(jù)處理再顯示出來就好了
以上是我使用的方法砸捏，如果有大佬有更好的方法希望可以提出來
謝謝
