ANTD-Vue 单选框影响多选框状态

<template>
  <div class="NewRadio">
    <a-radio-group v-model="value" @change="onChange">
      <a-radio :value="1"> 省份 </a-radio>
      <a-radio :value="2"> 城市 </a-radio>
    </a-radio-group>
    <p></p>
    <a-checkbox-group @change="onChangeD" v-model="addressBF" v-show="switchNoProvince">
      <a-row>
        <a-col :span="8">
          <a-checkbox value="A"> 河南 </a-checkbox>
        </a-col>
        <a-col :span="8">
          <a-checkbox value="B"> 山西 </a-checkbox>
        </a-col>
        <a-col :span="8">
          <a-checkbox value="C"> 河北 </a-checkbox>
        </a-col>
      </a-row>
    </a-checkbox-group>
    <a-checkbox-group @change="onChangeD" v-model="addressBF" v-show="switchNo">
      <a-row>
        <a-col :span="8">
          <a-checkbox value="A"> 上海 </a-checkbox>
        </a-col>
        <a-col :span="8">
          <a-checkbox value="B"> 北京 </a-checkbox>
        </a-col>
        <a-col :span="8">
          <a-checkbox value="C"> 重庆 </a-checkbox>
        </a-col>
      </a-row>
    </a-checkbox-group>
  </div>
</template>

<script>
export default {
  name: "NewRadio",
  data() {
    return {
      value: 1, //单选默认选择
      addressBF: [], //多选状态
      switchNo: false, //是否展示城市
      switchNoProvince: true, //是否展示省份
    };
  },
  methods: {
    //单选回调事件
    onChange(e) {
      console.log("radio checked", e.target.value);
      this.addressBF = []; //清空复选框状态
      if (e.target.value === 2) {
        this.switchNo = true;
        this.switchNoProvince = false;
      } else if (e.target.value === 1) {
        this.switchNo = false;
        this.switchNoProvince = true;
      }
    },
    //多选回调事件
    onChangeD(checkedValues) {
      console.log("checked = ", checkedValues);
      this.address = checkedValues;
    },
  },
};
</script>

效果