场景:
选中checkbox的时候,将当前选中的数据组成数据,提交给后台
找了挺多的方法,后面看到说element ui 的el-checkbox-group v-model 不支持数组对象,只支持一维数组。
解决方案:
<el-checkbox-group v-model="rulesId" class="rules-label" >
<el-checkbox v-for="(rule,i) in rulesList" :label="rule.leavel_id" :key="rule.leavel_id" :value="rule.leavel_id" v-model="rule.isChecked" @change="val => handleChecked(val,rule)">{{rule.leavel_name}}
<br>折扣:<el-input v-model="rule.discount" @input='discountChange(rule,i)'></el-input>
</el-checkbox>
</el-checkbox-group>
把change 事件写在el-checkbox @change="val => handleChecked(val,rule)" 参数val 就是checkbox 的选中状态,根据val的值去进行数组的添加和减少
handleChecked(val,rule){
if(val){
this.form.rules.push(rule)
}else{
this.deleteItem(rule.leavel_id,this.form.rules)
}
},
deleteItem (item, list) {
for (var key in list) {
if (list[key].leavel_id === item) {
list.splice(key, 1)
}
}
},
这几行代码,实现了这个功能,比我之前写的,简洁明了。如果大家有好的想法,欢迎交流啊