当前位置：首页 > VUE

vue筛选功能的实现

2026-01-23 13:15:35VUE

Vue 筛选功能实现方法

基础数据绑定与计算属性

在 Vue 中实现筛选功能通常需要结合 v-model 和计算属性。定义一个数据数组和筛选条件，通过计算属性返回过滤后的结果。

data() {
  return {
    items: [
      { id: 1, name: 'Apple', category: 'Fruit' },
      { id: 2, name: 'Carrot', category: 'Vegetable' }
    ],
    filterText: ''
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.filterText.toLowerCase())
    )
  }
}

模板中的双向绑定

在模板中使用 v-model 绑定输入框，通过 v-for 渲染过滤后的列表。

<input v-model="filterText" placeholder="Filter by name">
<ul>
  <li v-for="item in filteredItems" :key="item.id">
    {{ item.name }} ({{ item.category }})
  </li>
</ul>

多条件筛选

对于多条件筛选，可以扩展筛选逻辑。例如同时按名称和分类筛选：

data() {
  return {
    filterName: '',
    filterCategory: ''
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => {
      const nameMatch = item.name.toLowerCase().includes(this.filterName.toLowerCase())
      const categoryMatch = this.filterCategory ? 
        item.category === this.filterCategory : true
      return nameMatch && categoryMatch
    })
  }
}

使用 Vuex 管理状态

在大型应用中，可以使用 Vuex 集中管理筛选状态：

// store.js
state: {
  items: [...],
  filters: {
    name: '',
    category: ''
  }
},
getters: {
  filteredItems: state => {
    return state.items.filter(item => {
      // 筛选逻辑
    })
  }
}

性能优化

对于大型数据集，考虑以下优化：

使用防抖处理输入事件
对计算属性进行缓存
必要时使用虚拟滚动

import { debounce } from 'lodash'

methods: {
  handleInput: debounce(function(e) {
    this.filterText = e.target.value
  }, 300)
}

第三方库集成

对于复杂筛选需求，可以集成专用库如：

vue-search-select 提供高级搜索选择功能
lodash 的 _.filter 和 _.debounce 方法
Fuse.js 实现模糊搜索

import Fuse from 'fuse.js'

computed: {
  fuse() {
    return new Fuse(this.items, {
      keys: ['name', 'category'],
      threshold: 0.3
    })
  },
  fuzzyItems() {
    return this.filterText ? 
      this.fuse.search(this.filterText).map(r => r.item) : 
      this.items
  }
}

vue筛选功能的实现