vue 模糊查询实现
Vue 模糊查询实现方法
使用计算属性实现模糊查询
在 Vue 中可以通过计算属性结合 JavaScript 的 filter 和 includes 方法实现模糊查询。定义一个计算属性，根据输入的关键词过滤数据列表。
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
]
}
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}模板部分绑定输入框和显示过滤结果：
<input v-model="searchQuery" placeholder="Search...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>使用 Lodash 的防抖优化性能
对于大数据量或频繁输入的情况，可以使用 Lodash 的 debounce 函数优化性能，避免频繁触发过滤计算。
import { debounce } from 'lodash'
methods: {
debouncedSearch: debounce(function(query) {
this.searchQuery = query
}, 300)
}模板中监听输入事件：
<input @input="e => debouncedSearch(e.target.value)" placeholder="Search...">实现多字段模糊查询
如果需要同时匹配多个字段，可以扩展过滤逻辑：
computed: {
filteredItems() {
return this.items.filter(item =>
['name', 'description'].some(field =>
item[field].toLowerCase().includes(this.searchQuery.toLowerCase())
)
)
}
}使用第三方库实现高级搜索
对于更复杂的模糊搜索需求，可以使用 Fuse.js 等专门库：
import Fuse from 'fuse.js'
data() {
return {
fuse: null,
// ...其他数据
}
},
mounted() {
this.fuse = new Fuse(this.items, {
keys: ['name', 'description'],
threshold: 0.4
})
},
computed: {
filteredItems() {
return this.searchQuery
? this.fuse.search(this.searchQuery).map(r => r.item)
: this.items
}
}服务器端模糊查询实现
当数据量很大时，建议将模糊查询逻辑放在服务器端：
methods: {
async searchItems(query) {
const response = await axios.get('/api/items', {
params: { search: query }
})
this.filteredItems = response.data
}
}使用 watch 监听搜索词变化：
watch: {
searchQuery(newVal) {
this.searchItems(newVal)
}
}
