当前位置：首页 > VUE

vue实现表单筛选功能

2026-02-22 23:21:43VUE

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)
}

完整示例

结合上述内容，一个完整组件可能如下：

vue实现表单筛选功能

<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>