論element-ui表格的合并行和列

0、前言

? 作為一個后端來寫前端屬實是痛苦、講真的、剛開始我是真不想用餓了么的這個合并行和列、因為太語焉不詳了、看著頭疼、后來發(fā)現(xiàn)好像我沒得選、只好硬著頭皮上了。

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="數(shù)值 1（元）">
    </el-table-column>
    <el-table-column
        prop="amount2"
        label="數(shù)值 2（元）">
    </el-table-column>
    <el-table-column
        prop="amount3"
        label="數(shù)值 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
            };
          }
        }

先看看它們是怎么完成這個的：

? 首先，看似是合并了行、實際上是讓某些行的指定單元個內(nèi)容不顯示，照成了合并的假象，即如上述例子、實際上是有 5 行內(nèi)容、然后將行的第一列兩兩合并（就是在這兩行中只顯示第一行內(nèi)容，第二行內(nèi)容被隱藏了），其余列不變、形成合并的假象。

再來分析代碼：

? 分析代碼前先搞明白其中的變量有什么用

:span-method="objectSpanMethod"
// 這是在table標簽中定義的一個變量，變量值是一個方法，用這個方法去處理然后完成行列合并

2、變量解釋

objectSpanMethod({ row, column, rowIndex, columnIndex })
// 由它給的文檔我們可以知道、方法會被固定傳入一個對象，對象中有上述 4 個變量，其作用是：
/*
	row: 獲取此行的全部數(shù)據(jù)，即你需要傳入且展示的數(shù)據(jù)
	column：獲取列的結構及其數(shù)據(jù)、注意此時列的數(shù)據(jù)不是指我們傳入的數(shù)據(jù)、而是餓了么自己定義的列結構。
	rowIndex：行號，這個行號表示當前是第幾行
	columnIndex：列號，表示當前是第幾列
*/
// 相信我雖然解釋了變量意義，但是你還是不明白、因為我還有東西沒解釋。。。

3、方法運行解釋

:span-method="objectSpanMethod"
...
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    ...
}

整個方法的運行：

? 當表格需要進行合并時、整個渲染方式就發(fā)生了變化、之前可以看作以行為單位、一行一行渲染、而當你使用了 :span-method="objectSpanMethod" 變量后、渲染方式則改為一個單元格一個單元格渲染，即這個方法 objectSpanMethod 需要執(zhí)行的次數(shù)是：列的個數(shù) * 行數(shù)。

? 也就是說、它會按照這樣的格式去調(diào)用方法：(行值，列結構值，行號，列號)，具體例子為：

(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)

…

這里括號中的內(nèi)容表示每一次調(diào)用方法 objectSpanMethod 會傳入的參數(shù)內(nèi)容，因為前兩個參數(shù)是由我們實際值決定的，所以先統(tǒng)一使用變量代替。

這樣調(diào)用有什么用呢？看方法內(nèi)的代碼

if (columnIndex === 0) {  // columnIndex：表示是第幾 列 
    if (rowIndex % 2 === 0) { // rowIndex：表示是第幾行
        return {
            rowspan: 2,		// 2：需要合并的行數(shù)
            colspan: 1		// 1：需要合并的列數(shù)
        };
    } else {
        return {
            rowspan: 0,     // 0：只要是0，都代表著不顯示
            colspan: 0
        };
    }

看不太懂是吧？不急、接下來詳細解釋。

1、進入if

? 因為方法調(diào)用是有 4 個參數(shù)的、前兩個可以先不用看，主要看后兩個、觀察、想要方法中的第一個 if 執(zhí)行，我們就必須讓 columnIndex = 0 才行、也就是說只要當列號為 0 時，就會執(zhí)行 if 中的內(nèi)容，這有啥用呢？因為上述例子是想將第一列的內(nèi)容兩行兩行合并，所以我們首先得找到列的位置、也就是索引 0

2、第二個 if

? 一起理解，第二個 if 的作用是：當行號為 0，2 時，即除以 2 的余數(shù)為 0。我們會返回 兩個變量，其值為 2 ，1、反之、則返回0、0

有什么用？

? （2，1）：表示將自身以及下一行合并，即合并 2 行、將自身的列合并（如果值是 2 那么就是將自身和右邊的一起合并）

我們知道了 2，1 的作用、但還有一個沒說、也就是自身所處的行和列位置，顯而易見、方法的參數(shù)早已把這兩個值給我們了。

所以完整理解就是，如果方法參數(shù)是:(row, column, 0（行號）, 0（列號）) 、那么需要將第 1 行(自身)和第 2 行合并、將第 1列(自身)合并。(0：表示第 1 行，1：表示第 2 行)

但是此時又有個問題了，如果將 1 ，2行合并，那么應該同時有兩個ID值在同一行內(nèi)、但是我們希望只有一個才行、因此需要用到 第二個 if 中的 else 中內(nèi)容，即 0，0

? rowspan: 0, colspan: 0 ：結合自身行列號數(shù)與(0,0)、整體意思就是說：將處于第 2 行 ，第 1 列的值隱藏，

如此，便做到了只顯示一個ID又合并了兩個單元格

那如果我想將姓名這一列也做和ID列的同樣處理怎么辦？

只需要將 if 中的判斷條件添加一個，即:

if (columnIndex === 0 || columnIndex === 1) {  // columnIndex：表示是第幾 列 
    ...
    }

這樣，當方法執(zhí)行到姓名列時，也會做合并處理。

2、如果是動態(tài)數(shù)據(jù)怎么辦？

有時候開發(fā)中、我每一次需要合并的行數(shù)是不一定相同的、第一個需要合并3行，第二個需要合并6行甚至更多，那怎么辦？

回顧一下我們是怎么控制行列合并的？

if (columnIndex === 0) {  // columnIndex：表示是第幾 列 
    ===================================================
    =if (rowIndex % 2 === 0) { // rowIndex：表示是第幾行=
    ===================================================
        return {
            ======================================
            =	rowspan: 2,	// 2：需要合并的行數(shù)    =
            ======================================    
            colspan: 1		// 1：需要合并的列數(shù)
        };
    } else {
        return {
            rowspan: 0,     // 0：只要是0，都代表著不顯示
            colspan: 0
        };
    }

很顯然、我們只需要知道每一次合并的行個數(shù)即可，那怎么求呢？

我們開發(fā)中后端會給一個數(shù)組data我們，這個數(shù)組的長度就代表我們需要顯示的行數(shù)（不考慮合并時），此時我們需要將姓名相同的行進行合并，可以這樣做：

在return中定義兩個變量(我使用的是vue，你們可按需改變，本意思定義全局變量)：      
		spanArr:[], // 需要合并的行數(shù)
      	pos:0,// 索引

getSpanArr(data) {
    // 遍歷數(shù)據(jù)
    for (let i = 0; i < data.length; i++) {
        // 如果是第一個數(shù)據(jù)，就將列表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;
                // 且將數(shù)組添加 0 
                this.spanArr.push(0);
            } else {
                // 如果元素不同了，就可以通過索引為 pos 的值知曉應該需要合并的行數(shù)
                // 同時，我們再次添加一個值1，表示重新開始判斷重復姓名的次數(shù)
                this.spanArr.push(1);
                // 同時 索引加一
                this.pos = i;
            }
        }
    }
    console.log("索引數(shù)組：")
    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代表需要合并的行數(shù)，0代表此單元格需要被隱藏(當然這個作用會在`objectSpanMethod` 方法中體現(xiàn)，現(xiàn)在只是準備數(shù)據(jù))
*/
    
    objectSpanMethod({ row, column, rowIndex, columnIndex }){

    /* 此方法總共運行次數(shù)與有幾列幾行有關，如果有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) {
        /* 
        將需要合并的行數(shù)賦值給 _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、變量值展示

注：這只是某個單元格調(diào)用方法時的變量值
文章來源地址http://www.zghlxwxcb.cn/news/detail-412266.html

到了這里，關于論element-ui表格的合并行和列（巨細節(jié)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！