vue实现多级联动原理

Vue 多级联动实现原理

Vue 中实现多级联动的核心是通过响应式数据绑定和事件监听，动态更新下一级选项的数据。以下是常见实现方式：

数据驱动与 v-model 绑定

通过 v-model 绑定各级选择框的值，利用 watch 或 computed 监听上级选择的变化，动态更新下级选项的数据源。例如三级联动需要两个数据关联层：

data() {
  return {
    provinceList: [],
    cityList: [],
    districtList: [],
    selectedProvince: '',
    selectedCity: '',
    selectedDistrict: ''
  }
}

监听上级选择变化

使用 watch 监听上级选择值的变化，当值改变时请求或过滤下级数据：

watch: {
  selectedProvince(newVal) {
    this.fetchCities(newVal)
    this.selectedCity = ''
    this.selectedDistrict = ''
  },
  selectedCity(newVal) {
    this.fetchDistricts(newVal)
    this.selectedDistrict = ''
  }
}

异步数据加载

对于需要从接口获取的数据，在监听器中调用异步方法：

methods: {
  async fetchCities(provinceId) {
    this.cityList = await getCitiesByProvince(provinceId)
  },
  async fetchDistricts(cityId) {
    this.districtList = await getDistrictsByCity(cityId)
  }
}

静态数据过滤

如果使用本地静态数据，可通过 filter 方法筛选：

watch: {
  selectedProvince(newVal) {
    this.cityList = allCities.filter(city => city.provinceId === newVal)
  }
}

组件化实现

对于复杂联动，可将每级选择框封装为独立组件，通过 props 和 $emit 通信：

<province-select v-model="selectedProvince" />
<city-select 
  :province-id="selectedProvince" 
  v-model="selectedCity" 
/>

表单验证集成

结合表单验证时，需在值重置时清除验证状态：

watch: {
  selectedProvince() {
    this.$refs.form.clearValidate(['city', 'district'])
  }
}

性能优化

对于大数据量场景，可采用懒加载或虚拟滚动：

async fetchCities(provinceId) {
  if (this.cache[provinceId]) {
    this.cityList = this.cache[provinceId]
  } else {
    this.cityList = await api.getCities(provinceId)
    this.cache[provinceId] = this.cityList
  }
}

无依赖选择处理

确保各级选择框在无上级选择时禁用或清空：

<select :disabled="!selectedProvince">
  <option value="">请选择城市</option>
</select>