在 ElementUI 中实现 Table 单元格合并

在 ElementUI 中实现 Table 单元格合并

在使用 ElementUI 的 Table 组件时，有时我们需要合并相邻的单元格，以提高表格的可读性和简洁性。下面是一个关于如何在 Table 中根据特定字段合并单元格的实现方法。

逻辑分析

spanMethod 方法：这是 ElementUI 中用来控制表格合并单元格的函数，它接收当前行索引 rowIndex，当前列索引 columnIndex 和当前行数据 row。

获取行数据：通过 this.tableData 获取到表格中的所有数据，this.tableData 是绑定在 Table 组件上的数据源。

合并逻辑：

getRowSpan 函数用于处理单元格合并的逻辑。它通过比较当前行与上一行的特定字段值来判断是否需要合并单元格。

如果字段值相同，则返回 $0, 0$ ，表示当前单元格不显示，上一行的单元格进行合并。

如果字段值不同，则计算下方连续相同的单元格数量，决定合并多少行。

字段合并：

根据 columnIndex 来判断需要在哪些列进行合并，这里以 warehouseName 和 warehouseCode 字段为例。

默认合并行为：对于没有特别指定的列，默认不进行合并，即返回 $1, 1$ ，表示每个单元格占据一行一列。

代码示例

javascript 复制代码

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]; // 对于其他列，默认不合并
}