element plus table合并单元格讲解

Element Plus是一套基于Vue.js 2.0的桌面端组件库，其中的table表格组件支持合并单元格。在Element Plus中，我们可以通过设置span-method属性来自定义合并单元格的方法。具体来说，我们需要在data中定义一个方法，该方法接收两个参数：row和column，分别表示当前单元格所在的行和列。在该方法中，我们可以根据需要返回一个对象，该对象包含两个属性：rowspan和colspan，分别表示需要合并的行数和列数。例如，如果我们需要将第一列中相同的单元格合并，可以编写如下的span-method方法：

spanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    let rowspan = 1;
    for (let i = rowIndex + 1; i < this.tableData.length; i++) {
      if (this.tableData[i][columnIndex] === this.tableData[rowIndex][columnIndex]) {
        rowspan++;
      } else {
        break;
      }
    }
    return {
      rowspan,
      colspan: 1
    };
  }
}

在上述代码中，我们首先判断当前单元格是否为第一列，如果是，则遍历该列下面的所有单元格，找到相同的单元格并计算需要合并的行数，最后返回一个包含rowspan和colspan属性的对象即可。

除了自定义span-method方法外，我们还可以通过设置column的属性来实现合并单元格。具体来说，我们可以在column中设置prop属性来指定需要合并的列，然后在需要合并的单元格中设置rowspan和colspan属性即可。例如，如果我们需要将第一列中相同的单元格合并，可以编写如下的column配置：

columns: [
  {
    label: '入库编号',
    prop: 'batchNo',
    rowspan: ({ row, column, rowIndex, columnIndex }) => {
      if (columnIndex === 0) {
        let rowspan = 1;
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (this.tableData[i][columnIndex] === this.tableData[rowIndex][columnIndex]) {
            rowspan++;
          } else {
            break;
          }
        }
        return rowspan;
      }
    }
  },
  {
    label: '供应商',
    prop: 'supplierName',
    rowspan: ({ row, column, rowIndex, columnIndex }) => {
      if (columnIndex === 1) {
        let rowspan = 1;
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (this.tableData[i][columnIndex] === this.tableData[rowIndex][columnIndex]) {
            rowspan++;
          } else {
            break;
          }
        }
        return rowspan;
      }
    }
  },
  // 其他列的配置
]

在上述代码中，我们在column中设置了prop属性来指定需要合并的列，然后在需要合并的单元格中设置了rowspan属性来指定需要合并的行数。需要注意的是，rowspan属性可以是一个函数，该函数接收一个参数，该参数包含row、column、rowIndex和columnIndex四个属性，分别表示当前单元格所在的行、列以及行索引和列索引。在该函数中，我们可以根据需要返回需要合并的行数即可。