当前位置：首页 > VUE

vue 实现联动筛选

2026-03-10 02:22:40VUE

实现联动筛选的基本思路

在Vue中实现联动筛选通常涉及父子组件间的数据传递和状态管理。联动筛选的核心在于根据用户的选择动态更新后续选项，确保数据的一致性和逻辑的正确性。

父子组件通信

使用props和$emit实现父子组件间的数据传递。父组件通过props向子组件传递数据，子组件通过$emit触发事件通知父组件更新数据。

<!-- 父组件 -->
<template>
  <ChildComponent :options="options" @update="handleUpdate" />
</template>

<script>
export default {
  data() {
    return {
      options: []
    }
  },
  methods: {
    handleUpdate(value) {
      this.options = value
    }
  }
}
</script>

使用计算属性处理动态数据

利用计算属性根据用户选择动态计算后续选项。计算属性能自动缓存依赖项的变化，提高性能。

computed: {
  filteredOptions() {
    return this.options.filter(option => {
      return option.parentId === this.selectedParentId
    })
  }
}

使用Vuex管理状态

对于复杂应用，使用Vuex集中管理联动筛选的状态。通过mutations和actions确保状态变更的可追踪性。

// store.js
export default new Vuex.Store({
  state: {
    selectedOptions: {}
  },
  mutations: {
    updateSelection(state, payload) {
      state.selectedOptions = { ...state.selectedOptions, ...payload }
    }
  }
})

实现多级联动

多级联动需要逐层监听变化并更新下一级选项。使用watch监听选择变化，触发数据更新。

watch: {
  selectedLevel1(newVal) {
    this.fetchLevel2Options(newVal)
  }
},
methods: {
  fetchLevel2Options(parentId) {
    // 根据parentId获取二级选项
  }
}

表单绑定与验证

使用v-model绑定表单输入，结合Vue的响应式特性实现实时联动。通过计算属性或方法验证用户输入的有效性。

<select v-model="selectedCategory">
  <option v-for="category in categories" :value="category.id">{{ category.name }}</option>
</select>
<select v-model="selectedSubCategory" :disabled="!selectedCategory">
  <option v-for="subCat in filteredSubCategories" :value="subCat.id">{{ subCat.name }}</option>
</select>

性能优化

对于大数据量的联动筛选，采用虚拟滚动或分页加载优化性能。使用debounce或throttle减少频繁触发的计算。

import { debounce } from 'lodash'
methods: {
  fetchOptions: debounce(function(searchTerm) {
    // API调用
  }, 500)
}

示例代码

以下是一个完整的省市区三级联动示例：

vue 实现联动筛选

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

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

    <select v-model="selectedDistrict" :disabled="!selectedCity">
      <option value="">请选择区县</option>
      <option v-for="district in districts" :value="district.id">{{ district.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [],
      cities: [],
      districts: [],
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: ''
    }
  },
  created() {
    this.fetchProvinces()
  },
  methods: {
    fetchProvinces() {
      // API获取省份数据
      this.provinces = [
        { id: '1', name: '广东省' },
        { id: '2', name: '江苏省' }
      ]
    },
    loadCities() {
      this.selectedCity = ''
      this.selectedDistrict = ''
      this.districts = []
      // 根据省份ID获取城市数据
      this.cities = this.selectedProvince === '1' ? [
        { id: '11', name: '广州市' },
        { id: '12', name: '深圳市' }
      ] : [
        { id: '21', name: '南京市' },
        { id: '22', name: '苏州市' }
      ]
    },
    loadDistricts() {
      this.selectedDistrict = ''
      // 根据城市ID获取区县数据
      this.districts = this.selectedCity === '11' ? [
        { id: '111', name: '天河区' },
        { id: '112', name: '越秀区' }
      ] : this.selectedCity === '12' ? [
        { id: '121', name: '福田区' },
        { id: '122', name: '南山区' }
      ] : []
    }
  }
}
</script>