vue实现筛选功能

实现筛选功能的基本思路

在Vue中实现筛选功能通常涉及数据绑定、计算属性和方法的使用。通过监听用户输入或选择，动态过滤数据列表并更新视图。

基于计算属性的筛选

计算属性适合处理依赖响应式数据的筛选逻辑，自动缓存结果以提高性能。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</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>
  <div>
    <input v-model="searchQuery" @input="filterItems">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

多条件筛选实现

对于需要多个筛选条件的场景，可以结合多个输入控件和更复杂的筛选逻辑。

<template>
  <div>
    <input v-model="filters.name" placeholder="名称">
    <select v-model="filters.category">
      <option value="">所有分类</option>
      <option value="fruit">水果</option>
      <option value="vegetable">蔬菜</option>
    </select>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }} ({{ item.category }})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        name: '',
        category: ''
      },
      items: [
        { id: 1, name: '苹果', category: 'fruit' },
        { id: 2, name: '香蕉', category: 'fruit' },
        { id: 3, name: '胡萝卜', category: 'vegetable' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        const nameMatch = item.name.toLowerCase().includes(
          this.filters.name.toLowerCase()
        )
        const categoryMatch = this.filters.category === '' || 
          item.category === this.filters.category
        return nameMatch && categoryMatch
      })
    }
  }
}
</script>

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

对于复杂筛选需求，可以考虑使用lodash等工具库提供的函数式编程方法。

import _ from 'lodash'

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

服务器端筛选实现

当数据量很大时，可以将筛选逻辑移到服务器端，通过API请求获取筛选结果。

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

<script>
import axios from 'axios'
import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      filteredItems: [],
      debouncedFilter: _.debounce(this.fetchFilteredItems, 500)
    }
  },
  methods: {
    fetchFilteredItems() {
      axios.get('/api/items', {
        params: {
          q: this.searchQuery
        }
      }).then(response => {
        this.filteredItems = response.data
      })
    }
  }
}
</script>

筛选性能优化技巧

对于大型列表，可以采用虚拟滚动、分页或防抖技术来优化性能。

export default {
  data() {
    return {
      searchQuery: '',
      items: [], // 大量数据
      currentPage: 1,
      itemsPerPage: 20
    }
  },
  computed: {
    filteredItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.items
        .filter(item => item.name.includes(this.searchQuery))
        .slice(start, end)
    }
  }
}

以上实现方式涵盖了Vue中筛选功能的常见场景，从基础实现到性能优化，可以根据具体需求选择合适的方法。