el-checkbox-group获取选中的id 禁止选中已有项

<el-checkbox-group v-model="checkModel">
                    <el-checkbox @change="getCheckModel(item)" v-for="item in checkList" :key="item.id" :disabled="checkModel_.some(item_ => item_ == item.name)"  :label="item.name"></el-checkbox>
                </el-checkbox-group>

这里绑定的checkModel是一个包含选中的 label的数组
注意:el-checkbox-group 所对应v-model 必须是数组格式,且没有层级嵌套
后端返回的数据是这样的:
在这里插入图片描述

我们v-model绑定的checkModel只包含选中的name,要获取到对应的id就需要监听 el-checkbox的 change事件

getCheckModel(item){
            //checkModel是一个数组,里面放的是选中的name,需要筛选出选中的 角色id传给接口
            // console.log(item , "看下item")
            if(this.checkModel.includes(item.name)){
                this.jobIds.push(item.id)
            }else{
                const index = this.jobIds.findIndex(item_ => item_ == item.id)
                this.jobIds.splice(index,1)
            }

        },

看下checkModel:
在这里插入图片描述
jobIds:
在这里插入图片描述

禁止选中已有项

设置一个新的数组,用于放置已经存在的name,
在el-checkBox 添加:

:disabled="checkModel_.some(item_ => item_ == item.name)"

给遍历出来的el-checkBox添加disabled属性,用于控制是否禁止选中

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值