当前位置：首页 > VUE

vue 实现联动筛选

2026-02-18 13:05:07VUE

实现联动筛选的基本思路

联动筛选通常指多个筛选条件之间存在依赖关系，一个筛选条件的变化会影响其他筛选条件的可选范围。在Vue中可以通过数据绑定、计算属性和事件监听实现联动筛选。

数据准备与绑定

定义数据模型存储筛选条件和选项。例如，两级联动的地区选择：

vue 实现联动筛选

data() {
  return {
    provinces: [],
    cities: [],
    selectedProvince: null,
    selectedCity: null
  }
}

动态加载选项

使用计算属性或监听器根据上级选择动态更新下级选项。例如监听省份变化更新城市列表：

watch: {
  selectedProvince(newVal) {
    this.cities = this.getCitiesByProvince(newVal)
    this.selectedCity = null // 重置城市选择
  }
}

模板中的双向绑定

在模板中使用v-model绑定选择值，v-for渲染选项：

vue 实现联动筛选

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

<select v-model="selectedCity" :disabled="!selectedProvince">
  <option v-for="city in cities" :value="city.id">{{ city.name }}</option>
</select>

异步数据加载

如果选项数据需要从接口获取，可以在mounted或监听器中调用异步方法：

async mounted() {
  this.provinces = await fetchProvinces()
}

watch: {
  async selectedProvince(newVal) {
    this.cities = await fetchCities(newVal)
  }
}

使用第三方组件

对于复杂联动，可以考虑使用现成组件如：

Element UI的Cascader级联选择器
Ant Design Vue的Cascader
Vue Multiselect等

完整示例代码

<template>
  <div>
    <select v-model="selectedProvince">
      <option value="">请选择省份</option>
      <option v-for="p in provinces" :value="p.id">{{ p.name }}</option>
    </select>

    <select v-model="selectedCity" :disabled="!selectedProvince">
      <option value="">请选择城市</option>
      <option v-for="c in cities" :value="c.id">{{ c.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [
        { id: 1, name: '广东省' },
        { id: 2, name: '江苏省' }
      ],
      cities: [],
      selectedProvince: null,
      selectedCity: null
    }
  },
  watch: {
    selectedProvince(val) {
      this.cities = this.getCities(val)
      this.selectedCity = null
    }
  },
  methods: {
    getCities(provinceId) {
      const cityData = {
        1: [
          { id: 101, name: '广州市' },
          { id: 102, name: '深圳市' }
        ],
        2: [
          { id: 201, name: '南京市' },
          { id: 202, name: '苏州市' }
        ]
      }
      return cityData[provinceId] || []
    }
  }
}
</script>