vue+element table 合并列

vue+element table 合并列

<el-table
      ref="multipleTable"
      v-loading="listLoading"
      :data="tableData"
      tooltip-effect="dark"
      :header-cell-style="{background:'#eff3f6'}"
      :height="system.innerHeight-130-searchBoxHeight-75"
      :span-method="arraySpanMethod"
      style="width: 100%"
      border
    >

needMergeAttr为需要合并项的列

this.tableData为获取到后台返回的数据

arraySpanMethod方法

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
	//这里不能直接循环needMergeAttr
      if (column.property === 'resourcetype') {
        return this.mergeAction('resourcetype', rowIndex, column);
      }
      if (column.property === 'serviceattr') {
        return this.mergeAction('serviceattr', rowIndex, column);
      }
      if (column.property === 'servicetype') {
        return this.mergeAction('servicetype', rowIndex, column);
      }
      if (column.property === 'majorcategory') {
        return this.mergeAction('majorcategory', rowIndex, column);
      }
      if (column.property === 'majorsubcategory') {
        return this.mergeAction('majorsubcategory', rowIndex, column);
      }
      if (column.property === 'remark') {
        return this.mergeAction('remark', rowIndex, column);
      }
	},
    mergeAction(val, rowIndex, colData) {
      const _row = this.rowMergeArrs[val].rowArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return [_row, _col];
	},
    rowMergeHandle(arr, data) {
      if (!Array.isArray(arr) && !arr.length) return false;
      if (!Array.isArray(data) && !data.length) return false;
      const needMerge = {};
      arr.forEach(i => {
        needMerge[i] = {
          rowArr: [],
          rowMergeNum: 0
        };
        data.forEach((item, index) => {
          if (index === 0) {
            needMerge[i].rowArr.push(1);
            needMerge[i].rowMergeNum = 0;
          } else {
            if (item[i] === data[index - 1][i]) {
              needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
              needMerge[i].rowArr.push(0);
            } else {
              needMerge[i].rowArr.push(1);
              needMerge[i].rowMergeNum = index;
            }
          }
        });
      });
      return needMerge;
    }

效果图