element + vue Table动态单元格合并

效果

请求数据

 <el-table
                    ref="dragTable"
                    border
                    row-key="Id"
                    max-height="510"
                    stripe
                    :data="
                      ConsolidationList.slice(
                        (this.page4.pageNum - 1) * this.page4.pageSize,
                        (this.page4.pageNum - 1) * this.page4.pageSize +
                          this.page4.pageSize
                      )
                    "
                    :header-cell-style="$style.rowClass"
                    :span-method="cellMerge"
                  >
                    <el-table-column label="序号"  width="55" prop="Nosort"  align="center"/>

                    <el-table-column
                      prop="labelCode"
                      label="标签码"
                      align="center"
                    />
                    <el-table-column
                      prop="goodsName"
                      label="商品名称"
                      align="center"
                      show-overflow-tooltip
                    />
                    <el-table-column
                      prop="num"
                      label="分配数量"
                      align="center"
                    />

                    <el-table-column
                      prop="specKey"
                      label="包装单位"
                      align="center"
                    />

                    <el-table-column
                      prop="pickUnitType"
                      label="整零标识"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{
   
   {
                          PICK_UNIT_TYPE[scope.row.pickUnitType]
                        }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="" label="打印序号" align="center" />

                    <el-table-column
                      prop="createTime"
                      label="创建时间"
                      align="center"
                    />
                  </el-table>

                  <pagination
                    :total="ConsolidationList.length"
                    :page.sync="page4.pageNum"
                    :limit.sync="page4.pageSize"
                    v-show="ConsolidationList.length > 0"
                  />

 data() {
    
    
    return {
    
    
     spanArr: [], //遍历数据时，根据相同的标识去存储记录
      pos: 0, // 二维数组的索引
      ConsolidationList :[]
    },
    methods:{
    
    
    //获取数据
         queryAssembleRecord({
    
     orderBillId: id })
        .then((res) => {
    
    
          this.loading = false;
          if (res.data.data) {
    
    
            this.ConsolidationList = res.data.data;

            this.getSpanArr(res.data.data);
            // this.ConsolidationListData = res.data.data;
            console.log(this.spanArr);
          } else {
    
    
            this.ConsolidationList = [];
          }
        })
        .catch(() => {
    
    
          this.ConsolidationList = [];
        });
 // methods中定义方法
    getSpanArr(data) {
    
    
      let that = this;
      //页面展示的数据，不一定是全部的数据，所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造    成数据渲染混乱
      that.spanArr = [];
      that.pos = 0;
      //遍历数据
      data.forEach((item, index) => {
    
    
        //判断是否是第一项
        if (index === 0) {
    
    
          this.spanArr.push(1);
          this.pos = 0;
        } else {
    
    
          //不是第一项时，就根据标识去存储
          if (data[index].labelCode === data[index - 1].labelCode) {
    
    
            // 查找到符合条件的数据时每次要把之前存储的数据+1
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
    
    
            // 没有符合的数据时，要记住当前的index
            this.spanArr.push(1);
            this.pos = index;
          }
        }
      });
      // 表格序号
      let Nosort = 0;
      for (let n in  this.spanArr) {
    
    
        if ( this.spanArr[n] > 0) {
    
    
          Nosort += 1;
          this.$set(data[n], "Nosort", Nosort);
        }
      }
      console.log(this.spanArr, this.pos);
    },
    //合并单元格
    cellMerge({
     
      row, column, rowIndex, columnIndex }) {
    
    
      if (columnIndex === 0 || columnIndex === 1) {
    
    
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
    
    
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    }