element表格列单元格相同合并

效果预览:

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

html代码:

<el-table :data="list" :header-cell-style="{background:'#029ef1',color:'#ffffff'}"
         border height="650px" :span-method="objectSpanMethods"
          style="width: 100%;overflow: auto;margin: 0 auto;height: 650px;">
          <el-table-column label="序号" prop="jxno" width="40" align="center" />
          <el-table-column label="机型" prop="glxh" align="center" />
          <el-table-column label="层次" prop="arra" width="40" align="center" />
          <el-table-column label="物料名称" width="220" align="center" :show-overflow-tooltip='true'>
            <template slot-scope="scope">
              <template v-if="!scope.row.prcd && !scope.row.posd && scope.row.wlzl"> {{scope.row.wlzl}} </template>
              <template v-else-if="scope.row.rela === '新增'"> <span> {{scope.row.ponm}}</span></template>
              <template v-else> <span> {{scope.row.prnm}}</span> </template>
            </template>
          </el-table-column>
          <el-table-column label="编码(更改前)" width="120" :show-overflow-tooltip='true' prop="prcd" align="center" />
          <el-table-column label="数量" width="60" prop="prqu" align="center" />
          <el-table-column label="替换关系" width="60" prop="rela" align="center">
            <template slot-scope="scope">
              <span
                :class="[scope.row.rela === '取消'?'qxColor':[scope.row.rela === '新增'?'xzColor':[scope.row.rela === '替换'?'thColor':'' ]]]">{{scope.row.rela}}</span>
            </template>
          </el-table-column>
          <el-table-column label="编码(更改后)" width="150" :show-overflow-tooltip='true' prop="posd" align="center" />
          <el-table-column label="数量" width="60" prop="poqu" align="center" />
        </el-table>

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
          };
        }
      }