詳解element-ui表格的合并行和列(非常細節(jié))
0、前言
作為一個后端來寫前端屬實是痛苦、講真的、剛開始我是真不想用餓了么的這個合并行和列、因為太語焉不詳了、看著頭疼、后來發(fā)現好像我沒得選、只好硬著頭皮上了。
1、element - ui 的合并行和列代碼
效果圖:

代碼:
這里只展示關鍵代碼
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="數值 1(元)">
</el-table-column>
<el-table-column
prop="amount2"
label="數值 2(元)">
</el-table-column>
<el-table-column
prop="amount3"
label="數值 3(元)">
</el-table-column>
</el-table>
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}先看看它們是怎么完成這個的:
? 首先,看似是合并了行、實際上是讓某些行的指定單元個內容不顯示,照成了合并的假象,即如上述例子、實際上是有 5 行內容、然后將行的第一列兩兩合并(就是在這兩行中只顯示第一行內容,第二行內容被隱藏了),其余列不變、形成合并的假象。
再來分析代碼:
1、分析代碼前先搞明白其中的變量有什么用
:span-method="objectSpanMethod" // 這是在table標簽中定義的一個變量,變量值是一個方法,用這個方法去處理然后完成行列合并
2、變量解釋
objectSpanMethod({ row, column, rowIndex, columnIndex })
// 由它給的文檔我們可以知道、方法會被固定傳入一個對象,對象中有上述 4 個變量,其作用是:
/*
row: 獲取此行的全部數據,即你需要傳入且展示的數據
column:獲取列的結構及其數據、注意此時列的數據不是指我們傳入的數據、而是餓了么自己定義的列結構。
rowIndex:行號,這個行號表示當前是第幾行
columnIndex:列號,表示當前是第幾列
*/
// 相信我雖然解釋了變量意義,但是你還是不明白、因為我還有東西沒解釋。。。3、方法運行解釋
:span-method="objectSpanMethod"
...
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
...
}整個方法的運行:
? 當表格需要進行合并時、整個渲染方式就發(fā)生了變化、之前可以看作以行為單位、一行一行渲染、而當你使用了 :span-method="objectSpanMethod" 變量后、渲染方式則改為一個單元格一個單元格渲染,即這個方法 objectSpanMethod 需要執(zhí)行的次數是:列的個數 * 行數。
? 也就是說、它會按照這樣的格式去調用方法:(行值,列結構值,行號,列號),具體例子為:
(row, column, 0, 0)、(row, column, 0, 1)、(row, column, 0, 2)、(row, column, 0, 3)、(row, column, 0, 4)
(row, column, 1, 0)、(row, column, 1, 1)、(row, column, 1, 2)、(row, column, 1, 3)、(row, column, 1, 4)
…
這里括號中的內容表示每一次調用方法 objectSpanMethod 會傳入的參數內容,因為前兩個參數是由我們實際值決定的,所以先統(tǒng)一使用變量代替。
這樣調用有什么用呢?看方法內的代碼
if (columnIndex === 0) { // columnIndex:表示是第幾 列
if (rowIndex % 2 === 0) { // rowIndex:表示是第幾行
return {
rowspan: 2, // 2:需要合并的行數
colspan: 1 // 1:需要合并的列數
};
} else {
return {
rowspan: 0, // 0:只要是0,都代表著不顯示
colspan: 0
};
}看不太懂是吧?不急、接下來詳細解釋。
1、進入if
? 因為方法調用是有 4 個參數的、前兩個可以先不用看,主要看后兩個、觀察、想要方法中的第一個 if 執(zhí)行,我們就必須讓 columnIndex = 0 才行、也就是說只要當列號為 0 時,就會執(zhí)行 if 中的內容,這有啥用呢?因為上述例子是想將第一列的內容兩行兩行合并,所以我們首先得找到列的位置、也就是索引 0
2、第二個 if
? 一起理解,第二個 if 的作用是:當行號為 0,2 時,即除以 2 的余數為 0。我們會返回 兩個變量,其值為 2 ,1、反之、則返回0、0
有什么用?
? (2,1):表示將自身以及下一行合并,即合并 2 行、將自身的列合并(如果值是 2 那么就是將自身和右邊的一起合并)
我們知道了 2,1 的作用、但還有一個沒說、也就是自身所處的行和列位置,顯而易見、方法的參數早已把這兩個值給我們了。
所以完整理解就是,如果方法參數是:(row, column, 0(行號), 0(列號)) 、那么需要將第 1 行(自身)和第 2 行合并、將第 1列(自身)合并。(0:表示第 1 行,1:表示第 2 行)
但是此時又有個問題了,如果將 1 ,2行合并,那么應該同時有兩個ID值在同一行內、但是我們希望只有一個才行、因此需要用到 第二個 if 中的 else 中內容,即 0,0
? rowspan: 0, colspan: 0 :結合自身行列號數與(0,0)、整體意思就是說:將處于第 2 行 ,第 1 列的值隱藏,
如此,便做到了只顯示一個ID又合并了兩個單元格
那如果我想將姓名這一列也做和ID列的同樣處理怎么辦?
只需要將 if 中的判斷條件添加一個,即:
if (columnIndex === 0 || columnIndex === 1) { // columnIndex:表示是第幾 列
...
}這樣,當方法執(zhí)行到姓名列時,也會做合并處理。
2、如果是動態(tài)數據怎么辦?
有時候開發(fā)中、我每一次需要合并的行數是不一定相同的、第一個需要合并3行,第二個需要合并6行甚至更多,那怎么辦?
回顧一下我們是怎么控制行列合并的?
if (columnIndex === 0) { // columnIndex:表示是第幾 列
===================================================
=if (rowIndex % 2 === 0) { // rowIndex:表示是第幾行=
===================================================
return {
======================================
= rowspan: 2, // 2:需要合并的行數 =
======================================
colspan: 1 // 1:需要合并的列數
};
} else {
return {
rowspan: 0, // 0:只要是0,都代表著不顯示
colspan: 0
};
}很顯然、我們只需要知道每一次合并的行個數即可,那怎么求呢?
我們開發(fā)中后端會給一個數組data我們,這個數組的長度就代表我們需要顯示的行數(不考慮合并時),此時我們需要將姓名相同的行進行合并,可以這樣做:
在return中定義兩個變量(我使用的是vue,你們可按需改變,本意思定義全局變量):
spanArr:[], // 需要合并的行數
pos:0,// 索引
getSpanArr(data) {
// 遍歷數據
for (let i = 0; i < data.length; i++) {
// 如果是第一個數據,就將列表spanArr添加一個1,表示暫時只有一個名字相同的、且將索引pos賦值為0
if (i === 0) {
this.spanArr.push(1);
this.pos = 0
} else {
// 判斷當前元素與上一個元素是否相同
if (data[i].name === data[i - 1].name) {
// 如果相同就將索引為 pos 的值加一
this.spanArr[this.pos] += 1;
// 且將數組添加 0
this.spanArr.push(0);
} else {
// 如果元素不同了,就可以通過索引為 pos 的值知曉應該需要合并的行數
// 同時,我們再次添加一個值1,表示重新開始判斷重復姓名的次數
this.spanArr.push(1);
// 同時 索引加一
this.pos = i;
}
}
}
console.log("索引數組:")
console.log(this.spanArr)
},
===================
/*
spanArr最終的值格式是:
[3, 0, 0, 3, 0, 0, 3, 0, 0, 3, 0, 0, 3, 0, 0, 3, 0, 0, 3, 0, 0, 3, 0, 0, 3, 0, 0, 3, 0, 0]
3代表需要合并的行數,0代表此單元格需要被隱藏(當然這個作用會在`objectSpanMethod` 方法中體現,現在只是準備數據)
*/
objectSpanMethod({ row, column, rowIndex, columnIndex }){
/* 此方法總共運行次數與有幾列幾行有關,如果有5列30行,那么都是從0開始作為第一行第一列,
(行,列):0,0 0,1 0,2 0,3 0,4 0,5 1,0...*/
// 0,1,5表示需要處理 第 1,2,5列的行進行合并處理
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 5) {
/*
將需要合并的行數賦值給 _row,注意這里由上一個方法的輸出可以知道,這里的值可以是 3或者0
當為 3 時,表示將當下的第 rowIndex+1 行與第 columnIndex+1 列所指向的單元格向下合并 _row 格
當為 0 時,表示將當下的第 rowIndex+1 行與第 columnIndex+1 列所指向的單元格隱藏
*/
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},最終結果:

3、變量值展示
注:這只是某個單元格調用方法時的變量值

總結
到此這篇關于element-ui表格的合并行和列的文章就介紹到這了,更多相關element-ui表格合并行和列內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
淺談Vue3 Composition API如何替換Vue Mixins
這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
el-descriptions引入代碼中l(wèi)abel不生效問題及解決
這篇文章主要介紹了el-descriptions引入代碼中l(wèi)abel不生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
關于vue v-for循環(huán)解決img標簽的src動態(tài)綁定問題
今天小編就為大家分享一篇關于vue v-for循環(huán)解決img標簽的src動態(tài)綁定問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
elementui時間/日期選擇器選擇禁用當前之前(之后)時間代碼實例
當我們在進行網頁開發(fā)時,通常需要用到一些日期組件來方便用戶選擇時間,其中element日期組件是一個非常好用的工具,這篇文章主要給大家介紹了關于elementui時間/日期選擇器選擇禁用當前之前(之后)時間的相關資料,需要的朋友可以參考下2024-02-02
axios上傳文件錯誤:Current?request?is?not?a?multipart?request
最近工作中使用vue上傳文件的時候遇到了個問題,下面這篇文章主要給大家介紹了關于axios上傳文件錯誤:Current?request?is?not?a?multipart?request解決的相關資料,需要的朋友可以參考下2023-01-01
vue+iview框架實現左側動態(tài)菜單功能的示例代碼
這篇文章主要介紹了vue+iview框架實現左側動態(tài)菜單功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
vue配置生產環(huán)境.env.production與測試環(huán)境.env.development
這篇文章主要介紹了vue配置生產環(huán)境.env.production與測試環(huán)境.env.development方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue 監(jiān)聽input輸入事件(oninput)的示例代碼支持模糊查詢
這篇文章主要介紹了vue 監(jiān)聽input輸入事件(oninput)支持模糊查詢,比如說表格模糊查詢,實現一邊輸入,一邊過濾數據,本文通過示例代碼給大家詳細講解,需要的朋友可以參考下2023-02-02

