要求如下:
选了年假,其它假期类型禁用。取消选择年假,解禁所有复选框。
选了调休假,其它假期类型禁用。取消选择调休假,解禁所有复选框。
选了其它假期类型,不可以选年假和调休假。取消选择该假期类型,解禁所有复选框。
<template>
<el-checkbox-group v-model="checkList">
<el-checkbox label="年假" @change="change1()" :disabled="disableds[0]"></el-checkbox>
<el-checkbox label="调休假" @change="change()" :disabled="disableds[1]"></el-checkbox>
<el-checkbox label="事假" @change="change3( '事假')" :disabled="disableds[2]"></el-checkbox>
<el-checkbox label="婚假" @change="change3('婚假')" :disabled="disableds[3]"></el-checkbox>
<el-checkbox label="产假" @change="change3('产假')" :disabled="disableds[4]"></el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data () {
return {
checkList: [],
disableds:[false,false,false,false,false,false]
};
},
methods:{
enableAll(){
this.disableds=[false,false,false,false,false,false];
},
change(){
if(this.checkList.includes('调休假')){
this.disableds=[true,false,true,true,true,true];
}else{
this.enableAll();
}
} ,
change1(){
if(this.checkList.includes('年假')){
this.disableds=[false,true,true,true,true,true];
}else{
this.enableAll();
}
} ,
change3( item){
if(this.checkList.includes(item)){
this.disableds=[true,true,false,false,false,false];
}else{
this.enableAll();
}
}
}
};
</script>
@change是checkbox值发生变化时触发的事件。如果全部选择,checkList= [‘年假’,‘调休假’,‘事假’,‘婚假’]。:disabled="true"禁用checkbox。