当前位置：首页 > VUE

vue实现双联动

2026-03-09 05:52:38VUE

Vue 实现双联动的方法

双联动通常指两个下拉选择框（Select）之间的数据联动，即第一个选择框的值改变时，第二个选择框的选项随之变化。以下是实现双联动的几种方法。

使用 v-model 和 computed 属性

通过 v-model 绑定选择框的值，利用 computed 属性动态计算第二个选择框的选项。

vue实现双联动

<template>
  <div>
    <select v-model="selectedProvince">
      <option v-for="province in provinces" :key="province.id" :value="province.id">
        {{ province.name }}
      </option>
    </select>

    <select v-model="selectedCity">
      <option v-for="city in cities" :key="city.id" :value="city.id">
        {{ city.name }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [
        { id: 1, name: '广东省' },
        { id: 2, name: '江苏省' },
      ],
      cities: [],
      selectedProvince: null,
      selectedCity: null,
    };
  },
  computed: {
    filteredCities() {
      if (!this.selectedProvince) return [];
      return this.cities.filter(city => city.provinceId === this.selectedProvince);
    },
  },
  watch: {
    selectedProvince(newVal) {
      this.cities = this.getCitiesByProvince(newVal);
      this.selectedCity = null;
    },
  },
  methods: {
    getCitiesByProvince(provinceId) {
      // 模拟从接口获取数据
      const cityData = {
        1: [
          { id: 101, name: '广州市', provinceId: 1 },
          { id: 102, name: '深圳市', provinceId: 1 },
        ],
        2: [
          { id: 201, name: '南京市', provinceId: 2 },
          { id: 202, name: '苏州市', provinceId: 2 },
        ],
      };
      return cityData[provinceId] || [];
    },
  },
};
</script>

使用 Vuex 管理状态

如果项目中使用 Vuex，可以将联动数据存储在全局状态中，通过 mapState 和 mapActions 实现联动。

vue实现双联动

<template>
  <div>
    <select v-model="selectedProvince" @change="updateCities">
      <option v-for="province in provinces" :key="province.id" :value="province.id">
        {{ province.name }}
      </option>
    </select>

    <select v-model="selectedCity">
      <option v-for="city in cities" :key="city.id" :value="city.id">
        {{ city.name }}
      </option>
    </select>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['provinces', 'cities']),
    selectedProvince: {
      get() {
        return this.$store.state.selectedProvince;
      },
      set(value) {
        this.$store.commit('setSelectedProvince', value);
      },
    },
    selectedCity: {
      get() {
        return this.$store.state.selectedCity;
      },
      set(value) {
        this.$store.commit('setSelectedCity', value);
      },
    },
  },
  methods: {
    ...mapActions(['fetchCitiesByProvince']),
    updateCities() {
      this.fetchCitiesByProvince(this.selectedProvince);
    },
  },
};
</script>

使用第三方组件库

如果使用 Element UI 或 Ant Design Vue 等组件库，可以直接使用其提供的级联选择组件（Cascader）或联动选择功能。

以 Element UI 为例：

<template>
  <div>
    <el-select v-model="selectedProvince" placeholder="请选择省份">
      <el-option
        v-for="province in provinces"
        :key="province.id"
        :label="province.name"
        :value="province.id"
      />
    </el-select>

    <el-select v-model="selectedCity" placeholder="请选择城市">
      <el-option
        v-for="city in cities"
        :key="city.id"
        :label="city.name"
        :value="city.id"
      />
    </el-select>
  </div>
</template>