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 必须是数组格式,且没有层级嵌套
后端返回的数据是这样的:
el-checkbox-group获取选中的id 禁止选中已有项_第1张图片

我们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属性,用于控制是否禁止选中

你可能感兴趣的:(vue,vue)