vue实现关联选择显示

Vue 实现关联选择显示

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

数据准备

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

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

动态加载选项

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

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。

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

注意事项

• 确保在第一个选择框的值变化时清空第二个选择框的值，避免选项不匹配。
• 使用 disabled 属性控制第二个选择框的可操作性，提升用户体验。
• 如果选项数据较多，考虑使用分页或搜索功能优化性能。