Vue.js中切换单选按钮时如何动态修改Ant Design Vue下拉框的选项值

核心思路是利用Vue数据驱动视图的特性，维护一个响应式的下拉选项数组，单选切换时修改数组内容即可自动更新下拉选项，不需要手动操作DOM。

1. 新增响应式变量 #

在组件的data中定义存储下拉选项的数组：

data() {
  return {
    optionList: [] // 动态下拉选项列表
  }
}

如果你的项目使用了Ant Design Vue 1.x的Form表单（代码中用到了v-decorator），需要确保表单已经正确初始化：

// 1.x版本需要在组件创建时绑定form实例
created() {
  this.form = this.$form.createForm(this)
}

2. 修改模板部分 #

把下拉选择器的选项改为循环渲染optionList的内容：

<a-radio-group
  @change="changeName"
  v-decorator="[
    'name',
    { initialValue: 'light' },
  ]"
>
  <a-radio value="iphone">Iphone</a-radio>
  <a-radio value="samsung">Samsung</a-radio>
</a-radio-group>

<a-form-item label="Value" :colon="false">
  <a-select placeholder="Select a value" v-decorator="['deviceValue']">
    <!-- 循环渲染动态选项 -->
    <a-select-option 
      v-for="item in optionList" 
      :key="item.value" 
      :value="item.value"
    >
      {{ item.label }}
    </a-select-option>
  </a-select>
</a-form-item>

3. 调整单选切换方法 #

在changeName中根据选中的单选值给optionList赋值对应的选项即可：

methods: {
  changeName(event) {
    const value = event.target.value
    if (value === 'iphone') {
      this.optionList = [
        { value: 'ip12', label: 'Iphone 12' },
        { value: 'ip13', label: 'Iphone 13' }
      ]
    } else {
      this.optionList = [
        { value: 'ss10', label: 'Samsung note 10' },
        { value: 'ss9', label: 'Samsung note 9' }
      ]
    }
    // 切换选项后清空之前选中的下拉值，避免出现值不匹配的显示异常
    this.form.setFieldsValue({ deviceValue: undefined })
  }
}

注意事项 #

• 如果你的项目是Ant Design Vue 2.x/3.x版本，没有用v-decorator，直接给a-select绑定v-model即可，不需要手动操作form实例清空值，切换单选时直接把绑定的下拉选中值设为undefined即可。
• 循环渲染选项时必须绑定唯一的key值，这里使用选项的value作为key即可。

内容的提问来源于stack exchange，提问作者deskeay