当前位置：首页 > VUE

vue实现筛选排序

2026-01-22 06:15:40VUE

实现筛选功能

在Vue中实现筛选功能通常通过计算属性处理数据过滤。假设有一个商品列表需要根据价格范围筛选：

data() {
  return {
    products: [
      { id: 1, name: '商品A', price: 100 },
      { id: 2, name: '商品B', price: 200 },
      { id: 3, name: '商品C', price: 300 }
    ],
    minPrice: 0,
    maxPrice: 500
  }
},
computed: {
  filteredProducts() {
    return this.products.filter(product => 
      product.price >= this.minPrice && 
      product.price <= this.maxPrice
    )
  }
}

模板中使用v-model绑定筛选条件：

<input v-model.number="minPrice" type="number" placeholder="最低价">
<input v-model.number="maxPrice" type="number" placeholder="最高价">
<ul>
  <li v-for="product in filteredProducts" :key="product.id">
    {{ product.name }} - ¥{{ product.price }}
  </li>
</ul>

实现排序功能

排序功能同样可以通过计算属性实现。添加排序选项和排序方法：

vue实现筛选排序

data() {
  return {
    sortOption: 'price',
    sortDirection: 'asc'
  }
},
computed: {
  sortedProducts() {
    return [...this.filteredProducts].sort((a, b) => {
      let modifier = this.sortDirection === 'asc' ? 1 : -1
      return a[this.sortOption] > b[this.sortOption] ? modifier : -modifier
    })
  }
}

模板中添加排序控制：

<select v-model="sortOption">
  <option value="price">按价格</option>
  <option value="name">按名称</option>
</select>
<button @click="sortDirection = sortDirection === 'asc' ? 'desc' : 'asc'">
  排序方向：{{ sortDirection }}
</button>

组合筛选与排序

将筛选和排序的计算属性链式调用：

vue实现筛选排序

computed: {
  filteredProducts() {
    // 筛选逻辑
  },
  finalProducts() {
    return this.sortedProducts(this.filteredProducts)
  }
}

性能优化

对于大型数据集，考虑以下优化措施：

使用lodash的_.debounce处理频繁的筛选输入
对静态数据使用v-once减少不必要的重渲染
分页加载数据避免同时处理过多条目

import { debounce } from 'lodash'

methods: {
  handleFilter: debounce(function() {
    // 处理筛选逻辑
  }, 300)
}

服务器端处理

当数据量非常大时，建议将筛选排序逻辑移至服务器端：

methods: {
  async fetchProducts() {
    const res = await axios.get('/api/products', {
      params: {
        minPrice: this.minPrice,
        maxPrice: this.maxPrice,
        sortBy: this.sortOption,
        order: this.sortDirection
      }
    })
    this.products = res.data
  }
}

标签: vue