vue实现筛选
Vue 实现筛选功能
筛选功能通常涉及数据列表的动态过滤，可以通过计算属性、方法或第三方库实现。以下是几种常见实现方式：
基于计算属性的筛选
利用计算属性对数组进行过滤，响应式更新筛选结果：
<template>
<input v-model="searchText" placeholder="输入筛选条件">
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' }
],
searchText: ''
}
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchText.toLowerCase())
)
}
}
}
</script>使用自定义筛选方法
当筛选逻辑较复杂时，可通过方法处理：
methods: {
filterItems() {
return this.items.filter(item => {
return (
item.name.match(this.searchText) ||
item.price < this.maxPrice
)
})
}
}结合 Vuex 的状态管理
在大型项目中，可通过 Vuex 集中管理筛选状态：
// store.js
state: {
products: [],
filters: {
category: '',
priceRange: [0, 100]
}
},
getters: {
filteredProducts: (state) => {
return state.products.filter(product => {
return (
product.category === state.filters.category &&
product.price >= state.filters.priceRange[0] &&
product.price <= state.filters.priceRange[1]
)
})
}
}第三方库增强筛选
使用 lodash 等工具库实现高级筛选：
import _ from 'lodash'
computed: {
filteredItems() {
return _.filter(this.items, {
active: true,
category: this.selectedCategory
})
}
}多条件筛选实现
通过对象存储多个筛选条件：
data() {
return {
filters: {
name: '',
category: '',
minPrice: 0
}
}
},
computed: {
filteredItems() {
return this.items.filter(item => {
return (
item.name.includes(this.filters.name) &&
item.category === this.filters.category &&
item.price >= this.filters.minPrice
)
})
}
}性能优化建议
对于大数据量的筛选：
- 使用防抖处理输入事件
- 考虑分页或虚拟滚动
- 对静态数据预先建立索引
import { debounce } from 'lodash'
methods: {
handleSearch: debounce(function() {
this.filteredItems = this.doFilter()
}, 300)
}以上方法可根据具体需求组合使用，Vue 的响应式系统会自动处理依赖更新。
