vue 的el的checkbox样式_vue 使用element-ui的el-checkbox-group组件

场景:

9cd689038e4235bd3bb8aec5f3637cd0.png

选中checkbox的时候,将当前选中的数据组成数据,提交给后台

36b08f92a95009572c043695d57b277a.png

找了挺多的方法,后面看到说element ui 的el-checkbox-group v-model 不支持数组对象,只支持一维数组。

解决方案:

handleChecked(val,rule)">{{rule.leavel_name}}

折扣:

把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)

}

}

},

这几行代码,实现了这个功能,比我之前写的,简洁明了。如果大家有好的想法,欢迎交流啊

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值