多个 el-checkbox-group 使用同一个变量传参联动回显

在这里插入图片描述

      <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=''}}