el-table 动态行合并

 // 获取到表格数据后,调用这个方法,计算需要合并的行
   colMethod() {
     // 是否开启行合并
      if (!this.isMerge) return;
      let column = {};
      let columnArr = ['a','b','c']; // 合并行所在的列字段
      let position = 0;
      let arr = this.tableData; 
      // 遍历合并的列数据
      columnArr.forEach((prop) => {
        column[prop] = [];
        //  遍历合并的行数据
        arr.forEach((row, rowIndex) => {
          // 第N列第一行
          column[prop][rowIndex] = [1, 1];
          if (rowIndex === 0) {
            // 记录当前行号
            position = 0;
          } else if (row[prop] === arr[rowIndex - 1][prop]) {
            // 当前行数据等于上一行,根据记录的行号,计算需要合并几行。
            column[prop][position][0] += 1;
            // 当前行 隐藏不显示
            column[prop][rowIndex][0] = 0;
          } else {
            // 不相等之后,重置记录行号
            position = rowIndex;
          }
        });
      });
      this.mergeArr = column;
    },
   // 表格调用的合并方法
    spanMergeMethod({ column, rowIndex }) {
      if (!this.isMerge) return [1, 1];
      let arr = this.mergeArr[column.property] || [];
      if (arr.length) return arr[rowIndex];
      else [1, 1];
    },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容