vue中el-table合并单元格

1.在el-table中添加 :span-method=“handdelSpanMethod”
2.handdelSpanMethod方法

 //历史单特殊计量合并企业名称相同的第一列
      handdelSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 2) { // 企业名称相同时，合并第一列
          const prevRow = this.specilHislList[rowIndex - 1];
          if (prevRow && row.userName === prevRow.userName) {
            return {
              rowspan: 0,
              colspan: 1
            };
          } else {
            let rowspan = 1;
            for (let i = rowIndex + 1; i < this.specilHislList.length; i++) {
              if (this.specilHislList[i].userName === row.userName) {
                rowspan++;
              } else {
                break;
              }
            }
            return {
              rowspan,
              colspan: 1
            };
          }
        }
  
     /*****当mergeId为空时不合并******/
      if (columnIndex === 17) { // 合并第17列，即合计列
          const mergeId = row.mergeId;
          if (mergeId === null) {
            // 如果 mergeId 为 null，返回 1，表示不合并
            return [1, 1];
          }

          // 判断当前行和上一行的 mergeId 是否相同
          const prevRow = this.specilTotallList[rowIndex - 1];
          if (prevRow && prevRow.mergeId === mergeId) {
            // 如果上一行 mergeId 与当前行相同，则合并单元格，返回 [0, 0] 表示合并
            return [0, 0];
          } else {
            // 否则，不合并，返回 [1, 1] 表示当前单元格占用一行一列
            let rowspan = 1;
            // 向下查找连续相同 mergeId 的行数
            for (let i = rowIndex + 1; i < this.specilTotallList.length; i++) {
              if (this.specilTotallList[i].mergeId === mergeId) {
                rowspan++;
              } else {
                break;
              }
            }
            return [rowspan, 1];  // 设置 rowspan
          }
        }

        // 其他列不做处理，返回默认值
        return [1, 1];
      },
      },

原文地址：https://blog.csdn.net/qq_24441205/article/details/144030353

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！