vue 实现联动筛选
实现联动筛选的基本思路
联动筛选通常指多个下拉菜单或筛选条件之间存在依赖关系，前一个选项的变化会影响后一个选项的可用值。在Vue中可以通过数据绑定和计算属性实现这一功能。
数据准备
定义联动筛选所需的数据结构，通常是一个多层嵌套的对象或数组。例如地区与城市的联动：
data() {
return {
regions: [
{
id: 1,
name: '华东',
cities: [
{id: 11, name: '上海'},
{id: 12, name: '南京'}
]
},
{
id: 2,
name: '华北',
cities: [
{id: 21, name: '北京'},
{id: 22, name: '天津'}
]
}
],
selectedRegion: null,
selectedCity: null
}
}计算属性处理选项
使用计算属性动态生成下级选项列表：
computed: {
availableCities() {
if (!this.selectedRegion) return []
const region = this.regions.find(r => r.id === this.selectedRegion)
return region ? region.cities : []
}
}模板绑定
在模板中使用v-model绑定选择值，v-for渲染选项：
<select v-model="selectedRegion">
<option value="">请选择地区</option>
<option v-for="region in regions" :value="region.id">
{{ region.name }}
</option>
</select>
<select v-model="selectedCity" :disabled="!selectedRegion">
<option value="">请选择城市</option>
<option v-for="city in availableCities" :value="city.id">
{{ city.name }}
</option>
</select>处理联动变化
监听上级选项变化时重置下级选项：
watch: {
selectedRegion(newVal) {
if (!newVal) this.selectedCity = null
}
}多级联动扩展
对于三级或更多级联，可以扩展相同模式：
computed: {
availableCities() {
// 返回城市列表
},
availableDistricts() {
// 基于selectedCity返回区县列表
}
}使用组件化方案
对于复杂场景，可将联动选择器封装为独立组件：
// CascadeSelector.vue
props: ['options', 'level'],
emits: ['update:modelValue'],
computed: {
currentOptions() {
// 根据level计算当前级选项
}
}异步数据加载
当选项需要从接口获取时：
methods: {
async loadCities(regionId) {
const res = await api.getCities(regionId)
this.cities = res.data
}
},
watch: {
selectedRegion(val) {
if (val) this.loadCities(val)
}
}UI库集成
使用Element UI等组件库时：
<el-cascader
:options="options"
v-model="selectedOptions"
@change="handleChange"
></el-cascader>性能优化
对于大数据量的场景，可采用虚拟滚动或分步加载：
computed: {
visibleOptions() {
return this.allOptions.slice(0, 50)
}
}表单验证
结合表单验证规则：
rules: {
region: [{ required: true, message: '请选择地区' }],
city: [{ required: true, message: '请选择城市' }]
}以上方案可根据实际需求组合使用，核心在于利用Vue的响应式系统建立数据间的依赖关系，通过计算属性和监听器实现联动效果。
