vuejs怎么通过filterBy和orderBy实现搜索筛选、降序排序数据

发布时间：2022-04-27 10:53:31 作者：iii
来源：亿速云阅读：289

# Vue.js如何通过filterBy和orderBy实现搜索筛选、降序排序数据

## 前言

在Vue.js 1.x版本中，`filterBy`和`orderBy`是两个非常实用的内置过滤器，能够快速实现数据筛选和排序功能。虽然Vue 2.x已移除内置过滤器，但了解其原理对实现类似功能仍有参考价值。本文将详细介绍如何利用这两个过滤器实现搜索筛选和降序排序。

---

## 一、filterBy和orderBy基础

### 1. filterBy过滤器
```html
<!-- 基本语法 -->
<div v-for="item in items | filterBy searchKey">

功能：根据指定关键词筛选数组
参数：
- searchKey：搜索关键词
- in（可选）：指定搜索的属性名

2. orderBy过滤器

<!-- 基本语法 -->
<div v-for="item in items | orderBy sortKey reverseOrder">

功能：对数组进行排序
参数：
- sortKey：排序依据的字段
- reverseOrder（可选）：是否降序（true为降序）

二、完整实现示例

1. 基础实现

<div id="app">
  <!-- 搜索框 -->
  <input v-model="searchText" placeholder="搜索...">
  
  <!-- 排序按钮 -->
  <button @click="sortDesc = !sortDesc">
    {{ sortDesc ? '降序' : '升序' }}
  </button>
  
  <!-- 结果列表 -->
  <ul>
    <li v-for="item in filteredItems">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'MacBook Pro', price: 12999 },
      { name: 'iPhone 13', price: 5999 },
      { name: 'iPad Air', price: 4799 }
    ],
    searchText: '',
    sortDesc: true
  },
  computed: {
    filteredItems: function() {
      // Vue 1.x写法（已废弃）
      // return this.items | filterBy this.searchText in 'name' | orderBy 'price' this.sortDesc
      
      // 手动实现等效功能
      let result = this.items
      
      // 筛选
      if (this.searchText) {
        result = result.filter(item => 
          item.name.includes(this.searchText)
      }
      
      // 排序
      result.sort((a, b) => 
        this.sortDesc ? b.price - a.price : a.price - b.price
      )
      
      return result
    }
  }
})
</script>

2. 多条件搜索进阶版

computed: {
  filteredItems() {
    const searchText = this.searchText.toLowerCase()
    return this.items.filter(item => {
      return item.name.toLowerCase().includes(searchText) ||
             item.price.toString().includes(searchText)
    }).sort((a, b) => {
      // 按价格排序
      return this.sortDesc ? b.price - a.price : a.price - a.price
    })
  }
}

三、Vue 2.x/3.x的替代方案

1. 使用计算属性替代filterBy

computed: {
  filteredList() {
    return this.items.filter(item => {
      return item.name.match(this.searchText)
    })
  }
}

2. 使用methods实现多字段排序

methods: {
  sortBy(key) {
    this.items.sort((a, b) => {
      return a[key] > b[key] ? 1 : -1
    })
  }
}

3. 使用lodash库（推荐）

import _ from 'lodash'

computed: {
  sortedItems() {
    return _.orderBy(this.items, ['price'], ['desc'])
  }
}

四、性能优化建议

避免在v-for中使用复杂表达式 “`html


2. **对大数组使用分页**
   ```javascript
   computed: {
     paginatedItems() {
       const start = (this.page - 1) * this.pageSize
       return this.filteredItems.slice(start, start + this.pageSize)
     }
   }

使用防抖处理搜索输入


watch: {
 searchText: _.debounce(function() {
   // 搜索逻辑
 }, 500)
}

五、完整案例：商品管理系统

<div id="app">
  <div class="controls">
    <input v-model="search" placeholder="搜索商品">
    <select v-model="sortField">
      <option value="name">按名称</option>
      <option value="price">按价格</option>
    </select>
    <button @click="sortOrder *= -1">
      {{ sortOrder > 0 ? '↑升序' : '↓降序' }}
    </button>
  </div>

  <table>
    <tr v-for="product in sortedProducts">
      <td>{{ product.name }}</td>
      <td>{{ product.price | currency }}</td>
    </tr>
  </table>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    products: [...],
    search: '',
    sortField: 'price',
    sortOrder: -1
  },
  computed: {
    sortedProducts() {
      const filtered = this.products.filter(p => 
        p.name.includes(this.search) || 
        p.category.includes(this.search)
      )
      
      return filtered.sort((a, b) => {
        return a[this.sortField] > b[this.sortField] ? 
          this.sortOrder : -this.sortOrder
      })
    }
  },
  filters: {
    currency(value) {
      return '¥' + value.toFixed(2)
    }
  }
})
</script>

结语

虽然Vue新版移除了内置过滤器，但理解filterBy和orderBy的实现原理仍有助于我们： 1. 更好地处理数据筛选需求 2. 在需要维护老项目时快速定位功能 3. 掌握计算属性的高级用法

对于新项目，建议采用计算属性+lodash组合的方式，既能保持代码清晰，又能获得更好的性能表现。 “`

注：本文示例主要基于Vue 1.x的过滤器语法，同时提供了Vue 2+/3的现代实现方案。实际开发中请根据使用的Vue版本选择合适的方法。