需求，對指定的列表展示進(jìn)行合并單元格，循環(huán)展示指定行和指定列。

1.官方文檔

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

1.2.兩種返回方法

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

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

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

1.3 四個傳入?yún)?shù)

該方法接收四個傳入?yún)?shù)，當(dāng)前行row、當(dāng)前列column、當(dāng)前行號rowIndex、當(dāng)前列號columnIndex四個屬性。這4個屬性對我們定制化合并單元格很有幫助。要注意的是，行號和列號都是從0開始網(wǎng)上遞增的。

1.4深入理解返回值的意義

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

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

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

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

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

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

2 注意事項

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

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

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。