效果图
<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>// JSflitterData(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};}},
