需求，對指定的列表展示進行合并單元格，循環展示指定行和指定列。

1.官方文檔

通過給table傳入span-method方法可以實現合并行或列，方法的參數是一個對象，里面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。

1.2.兩種返回方法

其實就是兩種返回值的形式，本文章只用數組形式的返回舉例：

methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
//如果當前是第一行。因為下標從0開始，所以第一行的下標能被整除。
if (rowIndex % 2 === 0) {
//如果當前列是第一行第一列，合并1行，和2列
if (columnIndex === 0) {
return [1, 2];
} else if (columnIndex === 1) {
//如果當前列是第一行第二列，把值清除。注意，不清除的話，值會在后面一列展示，影響布局。
return [0, 0];
}
}
},
}

數組第一個元素代表rowspan(要合并的行數)，第二個元素代表colspan(要合并的列數)

1.3 四個傳入參數

該方法接收四個傳入參數，當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。這4個屬性對我們定制化合并單元格很有幫助。要注意的是，行號和列號都是從0開始網上遞增的。

1.4深入理解返回值的意義

想要做好合并，首先我們要理解如何合并，以及合并后的數據是如何進行處理的。以數組為例，Element接收第一個參數rowspan和第二個參數colspan，然后根據返回的值進行合并。

如圖，如果想將左邊的列合并單元格成右邊的列，那么只需要在數組中返回return [1,2]就行了，表示合并一行兩列。
代碼如下：

methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
//如果是第一列
if (columnIndex === 0||columnIndex ===1) {
//如果當前單元格是第一列和第二列的第一行，進行向下合并單元格
if (rowIndex % 2 === 0) {
return [1, 2];
}else {
//如果當前單元格是第一列和第二列的第二行，值置空(不置空則重復值會存在并向后一行展示，影響布局)
return [0, 0];
}
}
},
}

1.5為什么需要置空操作以及不需要合并的單元格需要控制嗎？

先回答后面一個問題，不需要合并操作的單元格不用控制，return[1,1]這種操作不需要。因為單元格就是原子的，是代碼控制的最小單位。
置空操作則需要反推下：如果不置空的話有什么影響？

(圖片僅作示意，并非真實情況。)
首先我們要知道，當我們合并單元格時，系統并不會把兩個單元格的值拼接在一個單元格里。而是會取第一個單元格的值。
Element在操作單元格時，也是取第一個單元格的值，但是不會將第二個單元格的值置空，這就會導致如上圖的情況。即，合并是成功了，多出的值沒有做處理。
因此，我們需要手動處理，定位到被合并的行或者列，將其值置為空，即返回[0,0]。

2 注意事項

2.1:當我們使用置空操作時一定要注意范圍問題，避免不小心，將其他的無辜的值也給置空了。舉例如下

methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
//如果是第一列
if (columnIndex === 0||columnIndex ===1) {
//如果當前單元格是第一列和第二列的第一行，進行向下合并單元格
if (rowIndex % 2 === 0) {
return [1, 2];
}
}else {
//錯誤操作
return [0, 0];
}
},
}

可以看到，如果像上面那樣進行返回，那么除了第一列和第二列，所有的單元格都會被置空。布局突然錯亂，可能就是作用域有問題，要認真檢查。

2.2 巧用%進行換行合并操作
使用取余函數，可以幫我們確定要操作的行和列，對合并單元格非常有用。

2.3 使用填充法進行不規則表格填充
當我們每個第二行需要自定義表頭時，可以將值定位固定值，利用合并單元格的特性，刪除重復的固定值。即可進行不規則填充，如下圖。

當然，如果是需要小計功能，有單獨的方法，我這個只針對自定義第二行的表頭。

總結

以上是生活随笔為你收集整理的asp单元格合并后宽度没有合并_ElementUI Table组件如何使用合并行或列功能深入解析...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。