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>
