element-ui table span-method(行合并)的實現(xiàn)代碼
element-ui官網(wǎng)中關于行合并的例子是根據(jù)行號進行合并的,這顯然不符合我們日常開發(fā)需求,因為通常我們table中的數(shù)據(jù)都是動態(tài)生成的,所以需要做一些修改。我們首先解讀一下官網(wǎng)實例中的各參數(shù)的意義:
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { //用于設置要合并的列
if (rowIndex % 2 === 0) { //用于設置合并開始的行號
return {
rowspan: 2, //合并的行數(shù)
colspan: 1 //合并的列數(shù),設為0則直接不顯示
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
研究這個例子后不難發(fā)現(xiàn),實現(xiàn)合并行的方法其實在每一行數(shù)據(jù)渲染的時候都會執(zhí)行,只不過在渲染過程中我們設置了它合并的行數(shù)和列數(shù),以得到不同的效果。所以我們需要生成一個與行數(shù)相同的數(shù)組記錄每一行設置的合并數(shù)。處理過程如下:
getSpanArr(data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0
} else {
// 判斷當前元素與上一個元素是否相同
if (data[i].name === data[i - 1].name) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
},
data就是我們從后臺拿到的數(shù)據(jù),通常是一個數(shù)組;spanArr是一個空的數(shù)組,用于存放每一行記錄的合并數(shù);pos是spanArr的索引。上述代碼意思是:如果是第一條記錄(索引為0),向數(shù)組中加入1,并設置索引位置;如果不是第一條記錄,則判斷它與前一條記錄是否相等,如果相等,則向spanArr中添入元素0,并將前一位元素+1,表示合并行數(shù)+1,以此往復,得到所有行的合并數(shù),0即表示該行不顯示。
cellMerge({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
然后根據(jù)得到的數(shù)組spanArr對表格進行合并渲染,并綁定合并方法
<el-table border :data="tableData" style="width: 100%;max-height: 160px;overflow: auto" :span-method="cellMerge"> ...... </el-table>
效果圖如下:

注:后臺獲取數(shù)據(jù)的時候根據(jù)要在前臺進行合并的字段進行排序,使要合并的字段值相同的記錄依次相鄰。
合并多行的情況
arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 1) {
// 合并第二行
if (columnIndex === 1) {
// 從第二列開始
return [2, 3]
// 這里返回的是行和列的合并數(shù)量,可以返回一個數(shù)組,也可以返回一個對象,效果一樣
// 這里rowspan為2是行有兩行合并,colspan為3是列有3列合并,你要合并幾行幾列就寫上相應的數(shù)字
// 這個判斷是把第一行的第3列,第4列的值省略,在合并的表格右邊直接填原先第5列的值,合并了幾列,就省略幾列的值
} else if (columnIndex === 2 || columnIndex === 3) {
return [0, 0]
}
} else if (rowIndex === 2 && (columnIndex === 1 || columnIndex === 2 || columnIndex === 3)) {
// 第二行的第2個數(shù),第3個數(shù),第4個數(shù)都要省略
return [0, 0]
}
}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue中解決異步交互數(shù)據(jù)出現(xiàn)延遲問題
這篇文章主要介紹了vue中解決異步交互數(shù)據(jù)出現(xiàn)延遲問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
vue2中基于vue-simple-upload實現(xiàn)文件分片上傳組件功能
這篇文章主要介紹了vue2中基于vue-simple-upload的文件分片上傳組件,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06

