当前位置：首页 > VUE

vue实现关联选择显示

2026-01-21 01:00:01VUE

Vue 实现关联选择显示

关联选择显示通常指根据第一个选择框的值动态加载第二个选择框的选项。以下是一个完整的实现方法。

数据准备

在 Vue 的 data 中定义两个选择框的数据模型。第一个选择框的选项是固定的，第二个选择框的选项根据第一个选择框的值动态变化。

data() {
  return {
    firstSelect: '',
    secondSelect: '',
    firstOptions: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' }
    ],
    secondOptions: []
  }
}

动态加载选项

使用 watch 监听第一个选择框的值变化，并根据该值动态更新第二个选择框的选项。

vue实现关联选择显示

watch: {
  firstSelect(newVal) {
    if (newVal === 1) {
      this.secondOptions = [
        { id: 101, name: '子选项1-1' },
        { id: 102, name: '子选项1-2' }
      ]
    } else if (newVal === 2) {
      this.secondOptions = [
        { id: 201, name: '子选项2-1' },
        { id: 202, name: '子选项2-2' }
      ]
    } else {
      this.secondOptions = []
    }
    this.secondSelect = ''
  }
}

模板绑定

在模板中使用 v-model 绑定选择框的值，并使用 v-for 渲染选项。

<select v-model="firstSelect">
  <option value="">请选择</option>
  <option v-for="option in firstOptions" :value="option.id">
    {{ option.name }}
  </option>
</select>

<select v-model="secondSelect" :disabled="!firstSelect">
  <option value="">请选择</option>
  <option v-for="option in secondOptions" :value="option.id">
    {{ option.name }}
  </option>
</select>

使用计算属性优化

如果第二个选择框的选项逻辑较为复杂，可以使用计算属性替代 watch。

vue实现关联选择显示

computed: {
  filteredSecondOptions() {
    if (this.firstSelect === 1) {
      return [
        { id: 101, name: '子选项1-1' },
        { id: 102, name: '子选项1-2' }
      ]
    } else if (this.firstSelect === 2) {
      return [
        { id: 201, name: '子选项2-1' },
        { id: 202, name: '子选项2-2' }
      ]
    }
    return []
  }
}

模板中直接使用计算属性：

<select v-model="secondSelect" :disabled="!firstSelect">
  <option value="">请选择</option>
  <option v-for="option in filteredSecondOptions" :value="option.id">
    {{ option.name }}
  </option>
</select>

异步加载选项

如果第二个选择框的选项需要从后端获取，可以在 watch 中使用异步请求。

watch: {
  async firstSelect(newVal) {
    if (newVal) {
      const response = await axios.get(`/api/options?parentId=${newVal}`)
      this.secondOptions = response.data
    } else {
      this.secondOptions = []
    }
    this.secondSelect = ''
  }
}