vue实现表单筛选功能
Vue 表单筛选功能实现
数据绑定与表单结构
使用 v-model 实现表单元素与 Vue 数据的双向绑定。例如筛选条件包含关键词和分类：
<template>
<form @submit.prevent="handleFilter">
<input v-model="filterParams.keyword" placeholder="关键词">
<select v-model="filterParams.category">
<option value="">全部</option>
<option v-for="cat in categories" :value="cat.id">{{ cat.name }}</option>
</select>
<button type="submit">筛选</button>
</form>
</template>定义数据与筛选逻辑
在 Vue 的 data 或 setup 中定义筛选参数和原始数据：
data() {
return {
filterParams: { keyword: '', category: '' },
categories: [{id: 1, name: '科技'}, {id: 2, name: '生活'}],
rawData: [], // 原始数据
filteredData: [] // 筛选结果
}
}实现筛选方法
通过计算属性或方法实现动态筛选。计算属性适合简单筛选，方法适合复杂逻辑：
computed: {
filteredData() {
return this.rawData.filter(item => {
const keywordMatch = item.title.includes(this.filterParams.keyword)
const categoryMatch =
!this.filterParams.category ||
item.category === this.filterParams.category
return keywordMatch && categoryMatch
})
}
}或使用方法触发筛选：
methods: {
handleFilter() {
this.filteredData = this.rawData.filter(item => {
// 筛选逻辑同上
})
}
}使用 watch 监听变化
当筛选参数变化时自动触发筛选，适合需要实时响应的场景：
watch: {
filterParams: {
handler(newVal) {
this.handleFilter()
},
deep: true
}
}与后端交互
若需后端筛选，通过 axios 发送参数并获取结果：
methods: {
async handleFilter() {
const res = await axios.get('/api/data', { params: this.filterParams })
this.filteredData = res.data
}
}优化体验
- 添加防抖处理频繁输入
- 显示加载状态
- 空结果提示
import { debounce } from 'lodash'
methods: {
handleFilter: debounce(function() {
// 筛选逻辑
}, 500)
}完整示例
结合上述内容，一个完整组件可能如下：
<template>
<div>
<form @submit.prevent="handleFilter">
<input v-model="filterParams.keyword" placeholder="关键词">
<select v-model="filterParams.category">
<option value="">全部</option>
<option v-for="cat in categories" :value="cat.id">{{ cat.name }}</option>
</select>
<button type="submit">筛选</button>
</form>
<ul v-if="filteredData.length">
<li v-for="item in filteredData" :key="item.id">{{ item.title }}</li>
</ul>
<p v-else>暂无数据</p>
</div>
</template>
<script>
export default {
data() {
return {
filterParams: { keyword: '', category: '' },
categories: [],
rawData: [],
filteredData: []
}
},
async created() {
const [cats, data] = await Promise.all([
axios.get('/api/categories'),
axios.get('/api/data')
])
this.categories = cats.data
this.rawData = data.data
this.filteredData = data.data
},
methods: {
handleFilter() {
this.filteredData = this.rawData.filter(item => {
const keywordMatch = item.title.includes(this.filterParams.keyword)
const categoryMatch =
!this.filterParams.category ||
item.category === this.filterParams.category
return keywordMatch && categoryMatch
})
}
}
}
</script>
