效果图

<el-table :data="gridData" border class="det-div" :span-method="objectSpanMethod">  
       <el-table-column prop="allocation_number" label="调拨单号"></el-table-column>
       <el-table-column prop="box_qty" label="装箱数量"></el-table-column>
       <el-table-column prop="box_id" label="箱号"></el-table-column>
       <el-table-column prop="sku" label="海外仓sku"></el-table-column>
       <el-table-column prop="delivery_qty" label="发货"></el-table-column>
       <el-table-column prop="signing_qty" label="签收"></el-table-column>
       <el-table-column prop="head_freight" label="每个头程运费(CNY)">
       </el-table-column>
</el-table>

// JS

flitterData(arr){
                    let spanOneArr = [],
                    spanTwoArr = [],
                    spanThreeArr = [],
                    concatOne = 0,
                    concatTwo = 0,
                    concatThree =0;
                    arr.forEach((item,index)=>{
                        if(index === 0){
                            spanOneArr.push(1);
                            spanTwoArr.push(1);
                            spanThreeArr.push(1);
                        }else{
                            if(item.allocation_number === arr[index - 1].allocation_number){ //第一列需合并相同内容的判断条件
                                spanOneArr[concatOne] += 1;
                                spanOneArr.push(0);
                            }else{
                                spanOneArr.push(1);
                                concatOne = index;
                            };
                            if(item.box_id === arr[index - 1].box_id&&item.allocation_number === arr[index - 1].allocation_number){//第二列需合并相同内容的判断条件
                                spanTwoArr[concatTwo] += 1;
                                spanTwoArr.push(0);
                            }else{
                                spanTwoArr.push(1);
                                concatTwo = index;
                            };
                            if(item.allocation_number === arr[index - 1].allocation_number&&item.box_qty === arr[index - 1].box_qty){ //第三列需合并相同内容的判断条件
                                spanThreeArr[concatThree] += 1;
                                spanThreeArr.push(0);
                            }else{
                                spanThreeArr.push(1);
                                concatThree = index;
                            };
                        }
                    });
                    return  {
                        one: spanOneArr,
                        two: spanTwoArr,
                        three: spanThreeArr
                    }
                },

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                    if(columnIndex === 0 ) {
                        const _row = (this.flitterData(this.gridData).one)[rowIndex];
                        const _col = _row > 0 ? 1 : 0;
                        return {
                          rowspan: _row,
                          colspan: _col
                        };
                      }
                      if(columnIndex === 2) {
                        const _row = (this.flitterData(this.gridData).two)[rowIndex];
                        const _col = _row > 0 ? 1 : 0;
                        return {
                          rowspan: _row,
                          colspan: _col
                        };
                      }
                      if(columnIndex === 1) {
                        const _row = (this.setTable(this.gridData).three)[rowIndex];
                        const _col = _row > 0 ? 1 : 0;
                        return {
                          rowspan: _row,
                          colspan: _col
                        };
                      }
                },

 

Logo

前往低代码交流专区

更多推荐