vue实现条件搜索
实现条件搜索的基本思路
在Vue中实现条件搜索通常涉及以下几个关键步骤：绑定表单输入、处理搜索逻辑、动态过滤数据。以下是具体实现方法。
表单数据绑定
使用v-model双向绑定搜索条件表单元素，将用户输入的条件存储在组件的data或ref中。例如搜索名称和分类：
<template>
<input v-model="searchParams.name" placeholder="名称">
<select v-model="searchParams.category">
<option value="">全部</option>
<option value="1">分类1</option>
</select>
</template>
<script setup>
const searchParams = reactive({
name: '',
category: ''
})
</script>计算属性过滤数据
通过计算属性实现实时过滤，根据条件返回匹配的数据列表。适用于前端本地数据过滤：
const filteredList = computed(() => {
return originalList.filter(item => {
const nameMatch = item.name.includes(searchParams.name)
const categoryMatch =
!searchParams.category ||
item.category === searchParams.category
return nameMatch && categoryMatch
})
})方法触发搜索
对于需要后端接口处理的搜索，定义搜索方法并在适当时机（如点击按钮或防抖输入）触发：
const searchResults = ref([])
const handleSearch = async () => {
const { data } = await axios.get('/api/search', {
params: searchParams
})
searchResults.value = data
}防抖优化性能
对输入框搜索添加防抖处理，避免频繁触发搜索：
import { debounce } from 'lodash-es'
const debouncedSearch = debounce(handleSearch, 500)
watch(() => searchParams.name, debouncedSearch)多条件组合搜索
处理复杂条件时，可构建动态查询对象，过滤空值条件：
const buildQuery = () => {
const query = {}
if (searchParams.name) query.name = searchParams.name
if (searchParams.category) query.category_id = searchParams.category
return query
}路由参数同步
将搜索条件同步到URL路由参数，支持页面刷新或分享时保持搜索状态：
const route = useRoute()
const router = useRouter()
watch(route, (newRoute) => {
searchParams.name = newRoute.query.name || ''
})
watch(searchParams, (newVal) => {
router.push({ query: { ...newVal } })
})响应式重置搜索
提供重置功能，清空所有条件并触发初始状态：
const resetSearch = () => {
Object.keys(searchParams).forEach(key => {
searchParams[key] = ''
})
handleSearch()
}通过以上方法组合，可以构建出灵活高效的条件搜索功能，适应不同业务场景需求。实际实现时可根据具体项目选择合适的技术方案。
