当前位置：首页 > VUE

vue项目怎么实现筛选

2026-02-22 02:03:08VUE

实现筛选功能的基本思路

在Vue项目中实现筛选功能，通常需要结合数据绑定、计算属性和方法。筛选的核心逻辑是根据用户输入的条件过滤数据列表，并将结果实时展示。

基于计算属性的筛选

使用计算属性可以高效地实现数据筛选，计算属性会自动缓存结果，只有在依赖项变化时才会重新计算。

<template>
  <input v-model="searchQuery" placeholder="搜索...">
  <ul>
    <li v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

多条件筛选实现

对于更复杂的多条件筛选，可以构建一个包含多个筛选条件的对象，并在计算属性中进行综合判断。

<template>
  <input v-model="filters.name" placeholder="名称">
  <input v-model="filters.category" placeholder="类别">
  <ul>
    <li v-for="product in filteredProducts" :key="product.id">
      {{ product.name }} - {{ product.category }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        name: '',
        category: ''
      },
      products: [
        { id: 1, name: '手机', category: '电子' },
        { id: 2, name: '笔记本', category: '电子' },
        { id: 3, name: '衬衫', category: '服装' }
      ]
    }
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => {
        return (
          product.name.toLowerCase().includes(this.filters.name.toLowerCase()) &&
          product.category.toLowerCase().includes(this.filters.category.toLowerCase())
        )
      })
    }
  }
}
</script>

使用watch实现异步筛选

当需要从API获取筛选结果时，可以使用watch配合异步方法实现。

<script>
export default {
  data() {
    return {
      searchTerm: '',
      results: [],
      isLoading: false
    }
  },
  watch: {
    searchTerm(newVal) {
      if(newVal.length > 2) {
        this.debouncedSearch()
      }
    }
  },
  created() {
    this.debouncedSearch = _.debounce(this.doSearch, 500)
  },
  methods: {
    async doSearch() {
      this.isLoading = true
      try {
        const response = await axios.get('/api/search', {
          params: { q: this.searchTerm }
        })
        this.results = response.data
      } catch (error) {
        console.error(error)
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

使用第三方库增强筛选功能

对于更高级的筛选需求，可以考虑使用专门的处理库如lodash的筛选方法，或者表格组件如VxeTable、Element UI的Table组件内置的筛选功能。

import _ from 'lodash'

computed: {
  filteredData() {
    return _.filter(this.dataList, item => {
      return _.includes(_.lowerCase(item.name), _.lowerCase(this.searchKey))
    })
  }
}

筛选与分页结合

当数据量较大时，筛选功能通常需要与分页组件结合使用。

computed: {
  filteredItems() {
    // 筛选逻辑
    return filteredData
  },
  paginatedItems() {
    const start = (this.currentPage - 1) * this.pageSize
    return this.filteredItems.slice(start, start + this.pageSize)
  },
  totalPages() {
    return Math.ceil(this.filteredItems.length / this.pageSize)
  }
}