el-radio-group 嵌套 el-select 动态value

在Element UI中，`el-radio-group` 和 `el-select` 的嵌套通常用于构建更复杂的表单控件，比如一个多级选择或下拉树形结构。当你需要动态设置 `el-radio-group` 的值，同时这个值又关联到 `el-select` 的选择时，可以这样做：

假设有一个层级结构，比如地区-城市-区县，你可以首先通过 `el-radio-group` 选择地区，然后在对应的区域下显示一个 `el-select` 来选择城市或区县。当用户点击某个地区，你可以通过 `v-model` 绑定的数据驱动策略来更新 `radio-group` 的值，并基于该值筛选出相应的 `select` 选项。

例如，你可以维护一个数据模型，如:

data() {
  return {
    regions: [
      { id: '1', name: '华北地区', cities: [] },
      { id: '2', name: '华东地区', cities: [] }
    ],
    selectedRegion: '',
    selectedCity: ''
  };
},
methods: {
  handleRadioChange(region) {
    this.selectedRegion = region.id;
    // 渲染或获取当前地区的城市列表
    const cityOptions = this.regions.find(r => r.id === this.selectedRegion).cities;
    this.$refs.citySelect.options = cityOptions; // 更新city select的选项
  },
  handleCityChange(cityId) {
    // 根据cityId选择区县
    const selectedSubRegion = this.regions.find(r => r.cities.find(c => c.id === cityId));
    this.selectedCity = selectedSubRegion.name; // 更新selectedCity
  }
}

在这个例子中，`handleRadioChange` 方法会在选中地区时更新 `selectedRegion`，进而影响 `el-select` 的选项。同样，`handleCityChange` 会随着城市的改变同步更新相关的区县信息。