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

造糖主义

已于 2024-06-26 10:05:54 修改

阅读量171

点赞数 2

分类专栏： vue 文章标签： vue.js 前端

于 2024-06-26 09:35:17 首次发布

本文链接：https://blog.csdn.net/weixin_45408578/article/details/139977174

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在这里插入图片描述

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