element表格列单元格相同合并

效果预览:

Snipaste_2020-07-06_17-15-56.png

html代码:

js代码:

// 获取合并的数组
      flitterData(arr) {
        let spanOneArr = []
        let spanTwoArr = []
        let concatOne = 0
        let concatTwo = 0
        arr.forEach((item, index) => {
          if (index === 0) {
            spanOneArr.push(1);
            spanTwoArr.push(1);
          } else {
            if (item.jxno === arr[index - 1].jxno) { //第一列需合并相同内容的判断条件
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            } else {
              spanOneArr.push(1);
              concatOne = index;
            };
            if (item.code === arr[index - 1].code && item.jxno === arr[index - 1].jxno) {//第二列需合并相同内容的判断条件
              spanTwoArr[concatTwo] += 1;
              spanTwoArr.push(0);
            } else {
              spanTwoArr.push(1);
              concatTwo = index;
            };
          }
        });
        return {
          one: spanOneArr,
          two: spanTwoArr,
        }
      },
      // 合并列
      objectSpanMethods({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          const _row = (this.flitterData(this.list).one)[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 1) {
          const _row = (this.flitterData(this.list).two)[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      }