当前位置：首页 > VUE

vue实现自动筛选

2026-02-20 06:45:03VUE

Vue 实现自动筛选的方法

自动筛选功能通常用于根据用户输入动态过滤数据列表。以下是几种实现方式：

使用计算属性实现筛选

计算属性可以自动追踪依赖变化并重新计算，适合实现筛选逻辑：

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>

使用 watch 实现复杂筛选

对于需要异步操作或更复杂逻辑的筛选，可以使用 watch：

data() {
  return {
    searchQuery: '',
    filteredItems: [],
    items: [/*...*/]
  }
},
watch: {
  searchQuery(newVal) {
    this.filteredItems = this.items.filter(item =>
      item.name.toLowerCase().includes(newVal.toLowerCase())
    )
  }
}

使用第三方库实现高级筛选

对于更复杂的需求，可以考虑使用 lodash 的 debounce 函数实现防抖：

import { debounce } from 'lodash'

methods: {
  filterItems: debounce(function(query) {
    this.filteredItems = this.items.filter(item =>
      item.name.toLowerCase().includes(query.toLowerCase())
    )
  }, 300)
},
watch: {
  searchQuery(newVal) {
    this.filterItems(newVal)
  }
}

多条件筛选实现

当需要多个筛选条件时，可以扩展筛选逻辑：

computed: {
  filteredItems() {
    return this.items.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(
        this.searchQuery.toLowerCase()
      )
      const matchesCategory = this.selectedCategory 
        ? item.category === this.selectedCategory 
        : true
      return matchesSearch && matchesCategory
    })
  }
}

服务器端筛选

对于大数据集，建议实现服务器端筛选：

vue实现自动筛选

methods: {
  async fetchFilteredData() {
    const response = await axios.get('/api/items', {
      params: { search: this.searchQuery }
    })
    this.filteredItems = response.data
  }
},
watch: {
  searchQuery() {
    this.fetchFilteredData()
  }
}

这些方法可以根据具体需求选择使用，计算属性适合简单客户端筛选，watch 适合需要额外处理的场景，而服务器端筛选适合大数据量情况。

标签: vue