vue + elementui table 列内容相同 自动合并单元格 完整代码
效果图<el-table :data="gridData" border class="det-div" :span-method="objectSpanMethod"><el-table-column prop="allocation_number" label="调拨单号"></el-table-column>&...
·
效果图
<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
};
}
},
更多推荐
已为社区贡献2条内容
所有评论(0)