<el-form-item label="保底对象" required><div style="display: flex"><span> A类:</span><el-checkbox-group v-model="guaranteedPartyA"><el-checkbox label="1">设备</el-checkbox><el-checkbox label="2">工程</el-checkbox><el-checkbox label="3">佣金</el-checkbox></el-checkbox-group></div><span style="padding-left: 60px"> B类:</span><el-checkbox-group v-model="guaranteedPartyB"><el-checkbox label="4">充电度数</el-checkbox><el-checkbox label="5">服务费收入</el-checkbox></el-checkbox-group></el-form-item>
// 可多选,A类:设备、工程、租金,B类:充电度数、服务费收入(只能二选一),选A类后就不能选B类
const guaranteedPartyA = ref<any>([]);
const guaranteedPartyB = ref<any>([]);
watch(guaranteedPartyA, (newValue) => {if (newValue && newValue.length > 0) {guaranteedPartyB.value = [];store.guaranteedParty = newValue.join(',');}
});
watch(guaranteedPartyB, (newValue) => {if (newValue && newValue.length > 0) {guaranteedPartyA.value = [];store.guaranteedParty = newValue.join(',');}
});// 回显
onMounted(() => {const {guaranteedParty} = storeconst guaranteedPartyList=guaranteedParty.split(',')if(['1','2','3'].includes(guaranteedPartyList[0])){guaranteedPartyA.value =guaranteedPartyList}if(['4','5'].includes(guaranteedPartyList[0])){guaranteedPartyB.value =guaranteedPartyList}
});
存在问题–取消选中的时候,没有置空,改成使用 @change事件
<el-form-item label="保底对象" required><div style="display: flex"><span> A类:</span><el-checkbox-group v-model="guaranteedPartyA" @change="handleChangePartyA"><el-checkbox label="1">设备</el-checkbox><el-checkbox label="2">工程</el-checkbox><el-checkbox label="3">佣金</el-checkbox></el-checkbox-group></div><span style="padding-left: 60px"> B类:</span><el-checkbox-group v-model="guaranteedPartyB" @change="handleChangePartyB"><el-checkbox label="4">充电度数</el-checkbox><el-checkbox label="5">服务费收入</el-checkbox></el-checkbox-group></el-form-item>
const handleChangePartyA=(newValue:any)=> {if (newValue && newValue.length > 0) {guaranteedPartyB.value = [];store.guaranteedParty = newValue.join(',');}else{store.guaranteedParty=''}}
const handleChangePartyB=(newValue:any)=> {if (newValue && newValue.length > 0) {guaranteedPartyA.value = [];store.guaranteedParty = newValue.join(',');}else{store.guaranteedParty=''}}