el-table合并单元格

 //#region  合并单元格
    // 这个方法是 element-ui提供的单元格合并方法
    // objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
    // row: 当前行
    // column: 当前列
    // rowIndex:当前行号
    // columnIndex :当前列号
    // 1代表:独占一行
    // 更大的自然数:代表合并了若干行
    // 0:代表“消失”的哪那一个单元格,后面的单元格向前推一格
    mergeCol(id, rowIndex) {
      debugger;
      // 合并单元格
      // id:属性名
      // rowIndex:行索引值
      var idName = this.TableData[rowIndex][id]; // 获取当前单元格的值
      if (rowIndex > 0) {
        // 判断是不是第一行
        // eslint-disable-next-line eqeqeq
        if (this.TableData[rowIndex][id] != this.TableData[rowIndex - 1][id]) {
          // 先判断当前单元格的值是不是和上一行的值相等
          var i = rowIndex;
          var num = 0; // 定义一个变量i,用于记录行索引值并进行循环,num用于计数
          while (i < this.TableData.length) {
            // 当索引值小于table的数组长度时,循环执行
            if (this.TableData[i][id] === idName) {
              // 判断循环的单元格的值是不是和当前行的值相等
              i++; // 如果相等,则索引值加1
              num++; // 合并的num计数加1
            } else {
              i = this.TableData.length; // 如果不相等,将索引值设置为table的数组长度,跳出循环
            }
          }
          return {
            rowspan: num, // 最终将合并的行数返回
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0, // 如果相等,则将rowspan设置为0
            colspan: 1,
          };
        }
      } else {
        // 如果是第一行,则直接返回
        let i = rowIndex;
        let num = 0;
        while (i < this.TableData.length) {
          // 当索引值小于table的数组长度时,循环执行
          if (this.TableData[i][id] === idName) {
            i++;
            num++;
          } else {
            i = this.TableData.length;
          }
        }
        return {
          rowspan: num,
          colspan: 1,
        };
      }
    },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值