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