在 ElementUI 中實現 Table 單元格合并
在使用 ElementUI 的 Table 組件時，有時我們需要合并相鄰的單元格，以提高表格的可讀性和簡潔性。下面是一個關于如何在 Table 中根據特定字段合并單元格的實現方法。

邏輯分析

spanMethod 方法：這是 ElementUI 中用來控制表格合并單元格的函數，它接收當前行索引 rowIndex，當前列索引 columnIndex 和當前行數據 row。

獲取行數據：通過 this.tableData 獲取到表格中的所有數據，this.tableData 是綁定在 Table 組件上的數據源。

合并邏輯：

getRowSpan 函數用于處理單元格合并的邏輯。它通過比較當前行與上一行的特定字段值來判斷是否需要合并單元格。
如果字段值相同，則返回 [0, 0]，表示當前單元格不顯示，上一行的單元格進行合并。
如果字段值不同，則計算下方連續相同的單元格數量，決定合并多少行。
字段合并：

根據 columnIndex 來判斷需要在哪些列進行合并，這里以 warehouseName 和 warehouseCode 字段為例。
默認合并行為：對于沒有特別指定的列，默認不進行合并，即返回 [1, 1]，表示每個單元格占據一行一列。

代碼示例

spanMethod({ rowIndex, columnIndex, row }) {// 獲取所有的行數據let rows = this.tableData;  //table綁定的數值// 通用合并邏輯：檢查當前行和上一行的某個字段，決定是否合并const getRowSpan = (field) => {let currentRow = row;let previousRow = rows[rowIndex - 1];if (currentRow && previousRow && currentRow[field] === previousRow[field]) {return [0, 0]; // 當前單元格不顯示，上一行單元格合并} else {let rowspan = 1;for (let i = rowIndex + 1; i < rows.length; i++) {if (rows[i][field] === currentRow[field]) {rowspan++;} else {break;}}return [rowspan, 1];}};// 根據列索引判斷使用哪個字段if (columnIndex === 1) {//columnIndex 為表格的下表，0開始return getRowSpan('warehouseName'); //warehouseName為要合并的table字段 } else if (columnIndex === 2) {return getRowSpan('warehouseCode');//warehouseCode為要合并的table字段}return [1, 1]; // 對于其他列，默認不合并
}