el-table实现表格合并

合并表格单元格在数据展示和用户体验方面有多种好处，以下是一些主要原因：

• 当表格中有重复数据时，合并单元格可以减少视觉上的冗余，使表格更简洁易读。
• 例如，一个产品有多个属性（如颜色、尺寸等），如果每个属性都在新行中，但产品名称重复出现，合并产品名称列可以使数据更加整齐，便于用户快速浏览

实现思路

在使用 el-table（Element UI 的表格组件）时，你可以通过自定义合并单元格的逻辑来实现表格单元格的合并。Element UI 提供了 span-method 属性，用于控制行或列的合并。

以下是一个详细的思路和示例，展示如何在 el-table 中合并单元格

<el-table
        :data="this.tableData.datalist"
        :span-method="objectSpanMethod" //合并方法
        :show-pagination="false"
        stripe
        :border="true"
      />
methods: {
  // 计算每行需要合并的数量   tableData为请求获取的表格数据源
  getSpanArr() {
    this.spanArr = [];
    for (let i = 0; i < this.tableData.datalist.length; i++) {
      if (i === 0) {
        this.spanArr.push(1);
        this.pos = 0;
      } else {
        // 判断当前元素与上一个元素的ID是否相同
        if (this.tableData.datalist[i].productId === this.tableData.datalist[i - 1].productId) {
          this.spanArr[this.pos] += 1;
          this.spanArr.push(0);
        } else {
          this.spanArr.push(1);
          this.pos = i;
        }
      }
    }
  },

  // 根据列索引和 spanArr 中的值来确定单元格的 rowspan 和 colspan
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // 页面列表上 表格合并行 -> 第几列(从0开始)
    // 需要合并多个单元格时 依次增加判断条件即可
    if (columnIndex !== 4 && columnIndex !== 5 && columnIndex !== 6) { 
      const _row = this.spanArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
        rowspan: _row,
        colspan: _col
      };
    } else {
      return false;
    }
  },

  // 异步获取数据并调用 getSpanArr 进行行合并计算
  inData() {
    axios.post('接口地址', this.queryModel).then(res => {
      this.tableData = res;
      this.totalNum = res.totalsize;
      this.loading = false;
      console.log(res, 'Response Data');
      this.getSpanArr();
    });
  }
}

getSpanArr 方法：这个方法用于计算每一行需要合并的数量，并存储在 spanArr 数组中。使用 productId 来判断当前行是否与前一行相同，如果相同则增加合并数量，否则重置合并计数。

objectSpanMethod 方法： 这个方法根据列索引和 spanArr 中的值来确定单元格的 rowspan 和 colspan，从而实现表格行的合并。 我这里的需求是排除第4、5和6列的合并（基于0索引），其他列根据 spanArr 来设置合并属性。