el-table 第一列相同即合并

原创于 2021-06-23 11:42:53 发布 · 811 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了如何使用JavaScript实现表格数据的合并功能，通过flitterData函数根据itemCode列的重复情况调整单元格行span。objectSpanMethod方法应用于el-table中，实现实时动态span。适合前端开发者理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    // 合并表格的第一列，处理表格数据
    flitterData(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //name 修改
           // item.itemCode 是我第一列要渲染的值  这个你们改成自己的
          if (item.itemCode === arr[index - 1].itemCode) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 表格数据修改
        const _row = this.flitterData(this.detailInfo.salesOrderManageLineVOS)
          .one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },

然后在el-table上面绑定:span-method="objectSpanMethod" 效果立即出来