element-ui单元格合并

1、data中return定义

2、自定义方法合并表格

3、初始化合并数据

4、合并表格

/**
     * 合并表格
     */
    mergeTable(data) {
      // console.log(data);
      this.mergeInit();
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            // 第一行必须存在，以第一行为基准
            this.areaNameArr.push(1); // areaName
            this.areaNameIndex = 0;

            this.typeArr.push(1); // type
            this.typeIndex = 0;

            this.planceNameArr.push(1); // planceName
            this.planceNameIndex = 0;

            this.scenicPersonCountArr.push(1); // scenicPersonCount
            this.scenicPersonCountIndex = 0;

            this.cameracountArr.push(1); // cameracount
            this.cameracountIndex = 0;

            this.scenicArchivescountArr.push(1); // scenicArchivescount
            this.scenicArchivescountIndex = 0;

            this.idArr.push(1); // scenicArchivescount
            this.idIndex = 0;
          } else {
            // 判断当前元素与上一元素是否相同
            // areaName
            if (
              data[i].areaName === data[i - 1].areaName &&
              data[i].id === data[i - 1].id
            ) {
              this.areaNameArr[this.areaNameIndex] += 1;
              this.areaNameArr.push(0);
            } else {
              this.areaNameArr.push(1);
              this.areaNameIndex = i;
            }

            // id
            if (
              data[i].id === data[i - 1].id &&
              data[i].id === data[i - 1].id
            ) {
              this.idArr[this.idIndex] += 1;
              this.idArr.push(0);
            } else {
              this.idArr.push(1);
              this.idIndex = i;
            }

            // type
            if (
              data[i].type === data[i - 1].type &&
              data[i].id === data[i - 1].id
            ) {
              this.typeArr[this.typeIndex] += 1;
              this.typeArr.push(0);
            } else {
              this.typeArr.push(1);
              this.typeIndex = i;
            }

            // planceName
            if (
              data[i].planceName === data[i - 1].planceName &&
              data[i].id === data[i - 1].id
            ) {
              this.planceNameArr[this.planceNameIndex] += 1;
              this.planceNameArr.push(0);
            } else {
              this.planceNameArr.push(1);
              this.planceNameIndex = i;
            }

            // scenicPersonCount
            if (
              data[i].scenicPersonCount === data[i - 1].scenicPersonCount &&
              data[i].id === data[i - 1].id
            ) {
              this.scenicPersonCountArr[this.scenicPersonCountIndex] += 1;
              this.scenicPersonCountArr.push(0);
            } else {
              this.scenicPersonCountArr.push(1);
              this.scenicPersonCountIndex = i;

5、合并行和列

 /**
     * 合并行和列
     */
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row, column);
      // console.log(column);
      // console.log(rowIndex, "rowIndex");
      // console.log(columnIndex, "columnIndex");
      if (columnIndex === 0) {
        // 第一列 areaName
        const _row_1 = this.areaNameArr[rowIndex];
        const _col_1 = _row_1 > 0 ? 1 : 0;
        return {
          rowspan: _row_1,
          colspan: _col_1,
        };
      } else if (columnIndex === 1) {
        // 第二列 type
        const _row_2 = this.typeArr[rowIndex];
        const _col_2 = _row_2 > 0 ? 1 : 0;
        return {
          rowspan: _row_2,
          colspan: _col_2,
        };
      } else if (columnIndex === 2) {
        // 第三列 planceName
        const _row_2 = this.planceNameArr[rowIndex];
        const _col_2 = _row_2 > 0 ? 1 : 0;
        return {
          rowspan: _row_2,
          colspan: _col_2,
        };
      } else if (columnIndex === 3) {
        // 第四列 scenicPersonCount
        const _row_2 = this.scenicPersonCountArr[rowIndex];
        const _col_2 = _row_2 > 0 ? 1 : 0;
        return {
          rowspan: _row_2,
          colspan: _col_2,
        };
      } else if (columnIndex === 4) {
        // 第五列 cameracount
        const _row_2 = this.cameracountArr[rowIndex];
        const _col_2 = _row_2 > 0 ? 1 : 0;
        return {
          rowspan: _row_2,
          colspan: _col_2,
        };
      } else if (columnIndex === 4) {
        // 第六列 scenicArchivescount
        const _row_2 = this.scenicArchivescountArr[rowIndex];
        const _col_2 = _row_2 > 0 ? 1 : 0;
        return {
          rowspan: _row_2,
          colspan: _col_2,
        };
      } else if (columnIndex === 8) {
        const _row_2 = this.idArr[rowIndex];
        const _col_2 = _row_2 > 0 ? 1 : 0;
        return {
          rowspan: _row_2,
          colspan: _col_2,
        };
      }
    },

6、效果呈现