需求:
1. 发货数量默认为0,用户可自行输入;
2. 点击复选框将未发货数动态赋值给发货数,取消复选发货数为0;
3. 点击全选框将每行的未发货数赋值给对应发货数,取消全选发货数为0。
实现步骤:
画重点:
1.模板定义
<el-table v-show="order"
ref="multipleTable"
:v-loading="loading"
border :data="tableDataOrder"
height="69vh"
style="width: 100%; height: 69vh"
@select-all="itemHandleSelectionAll"
@select="itemHandleSelectionChange"
@selection-change="selectionChangeHandler"
>
<el-table-column label="序号" width="70" align="left">
<template slot-scope="scope">
{{ (scope.$index+1) }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="unShipped" label="未发货数" />
<el-table-column :show-overflow-tooltip="true" prop="price" label="单价">
<template slot-scope="scope">
<el-input v-model.number="scope.row.price" />
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="deliverNum" label="发货数量">
<template slot-scope="scope">
<el-input v-model.number="scope.row.deliverNum" oninput="value=value.replace(/[^\d]/g,'')" @focus="onfoucs(scope)" @blur="blurUsername(scope)" />
</template>
</el-table-column>
</el-table>
- js方法定义:
// 手动单选(订单)
itemHandleSelectionChange(selection, row) { //selection为当前所选数据集合,row为当前选中行数据
const selected = selection.length && selection.indexOf(row) !== -1
if (selected === true) { //这里只需判断是否勾选,进行相应赋值操作即可
row.deliverNum = row.unShippedNumTemp
} else {
row.deliverNum = 0
}
},
// 手动全选(订单)
itemHandleSelectionAll(selection) {
console.log(`全选----`, selection)
if (selection.length !== 0) {
selection.map(v => { v.deliverNum = v.unShipped}) //这里将全选的数据遍历后将未发货赋值给发货
this.totalNumer = this.countTotal(selection, 'unShipped') //这里是合计方法,之前的博文中有详细介绍
} else {
this.submitCUOrder() //注意这块是判断取消全选后重新调用初始化表格方法,不然发货数无法清0
this.totalNumer = this.countTotal(selection, 'deliverNum')
}
}
看效果:
此方法是本人结合官方文档研究出来的,不足之处请指教。