效果如下:
template中代码如下:
<el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border highlight-current-row @selection-change="selectChanges" > <el-table-column type="selection" width="40"/> <el-table-column label="采购订单编号" align="center"> <template slot-scope="scope">{{ scope.row.inNo }}</template> </el-table-column> </el-table>
js中代码如下:
selectChanges: function(val) { // console.log(val) this.selected = [] val.forEach(obj => { this.selected.push(obj) }) this.selected.forEach(item => { const data = { inDetailId: item.id }; // 获取已收货的重量 supply.initNum(data).then(response => { // console.log(response) if (response.success) { if(response.data) { item.num = response.data.num } else { item.num = '' } } else { this.$message.error(response.msg); } }); }) },
注意:val是数组,也可以如下处理:
selectChanges(val) {
this.selected = val;
},
注意:如果没有勾选多选框,则在点击按钮进行下一步操作时要先判断数组this.selected是否有值,如果没有则进行提示,而不是直接进行下一步操作代码如下:
<el-form-item> <el-button type="primary" style="margin-left: 620px;" @click="addManySupplyNote" >创建多个供货通知单</el-button> </el-form-item> addManySupplyNote() { // console.log(this.selected) if (this.selected.length == 0) { this.$message.warning("没有勾选订单,无法创建") return; } this.$refs['add-supplyNote'].openDialog(this.selected); },
提示效果如下: