当前位置：首页 > VUE

vue实现select联动效果

2026-02-24 20:03:21VUE

实现 Select 联动效果

在 Vue 中实现 Select 联动效果通常涉及父子组件之间的数据传递和事件监听。以下是一种常见的实现方式：

数据准备

定义两个 Select 的数据源，通常是一个对象或数组，包含联动关系。例如：

data() {
  return {
    provinces: [
      { id: 1, name: '北京' },
      { id: 2, name: '上海' }
    ],
    cities: {
      1: [
        { id: 101, name: '朝阳区' },
        { id: 102, name: '海淀区' }
      ],
      2: [
        { id: 201, name: '黄浦区' },
        { id: 202, name: '浦东新区' }
      ]
    },
    selectedProvince: null,
    selectedCity: null
  }
}

模板部分

在模板中使用 v-model 绑定选中的值，并监听 change 事件：

<select v-model="selectedProvince" @change="handleProvinceChange">
  <option value="">请选择省份</option>
  <option v-for="province in provinces" :value="province.id">{{ province.name }}</option>
</select>

<select v-model="selectedCity">
  <option value="">请选择城市</option>
  <option v-for="city in filteredCities" :value="city.id">{{ city.name }}</option>
</select>

计算属性

使用计算属性根据选中的省份动态过滤城市列表：

computed: {
  filteredCities() {
    if (!this.selectedProvince) return []
    return this.cities[this.selectedProvince] || []
  }
}

事件处理

在选中省份时重置城市的选择：

methods: {
  handleProvinceChange() {
    this.selectedCity = null
  }
}

使用 Vuex 管理状态

对于更复杂的应用，可以使用 Vuex 来管理联动状态：

Store 定义

const store = new Vuex.Store({
  state: {
    selectedProvince: null,
    selectedCity: null
  },
  mutations: {
    setProvince(state, province) {
      state.selectedProvince = province
      state.selectedCity = null
    },
    setCity(state, city) {
      state.selectedCity = city
    }
  }
})

组件中使用

computed: {
  ...mapState(['selectedProvince', 'selectedCity']),
  filteredCities() {
    // 过滤逻辑
  }
},
methods: {
  ...mapMutations(['setProvince', 'setCity'])
}

动态加载数据

对于需要从后端加载数据的场景：

异步加载

methods: {
  async handleProvinceChange() {
    this.selectedCity = null
    if (this.selectedProvince) {
      const response = await axios.get(`/api/cities?province=${this.selectedProvince}`)
      this.cities = response.data
    }
  }
}

使用第三方组件

如果需要更复杂的功能，可以考虑使用第三方组件如 Element UI 的 Cascader：

vue实现select联动效果

Element UI 示例

<el-cascader
  v-model="selectedOptions"
  :options="options"
  @change="handleChange">
</el-cascader>

data() {
  return {
    selectedOptions: [],
    options: [{
      value: 'zhejiang',
      label: '浙江',
      children: [{
        value: 'hangzhou',
        label: '杭州'
      }]
    }]
  }
}

以上方法可以根据具体需求选择适合的实现方式，从简单到复杂覆盖了大多数联动选择场景。