vue筛选功能的实现
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
}
}
