vue2.0 实现orderby

实现排序功能的基本思路

在 Vue 2.0 中实现类似 orderBy 的功能，可以通过计算属性结合 JavaScript 的数组排序方法完成。Vue 2.0 本身没有内置 orderBy 过滤器（Vue 1.x 中有），但可以通过自定义方法实现。

使用计算属性排序

定义一个计算属性，对原始数据进行排序并返回结果。以下是一个按数字升序排列的示例：

data() {
  return {
    items: [
      { name: 'Item C', value: 30 },
      { name: 'Item A', value: 10 },
      { name: 'Item B', value: 20 }
    ],
    sortKey: 'value', // 默认按 value 排序
    sortOrder: 1      // 1 升序，-1 降序
  }
},
computed: {
  sortedItems() {
    return [...this.items].sort((a, b) => {
      return (a[this.sortKey] > b[this.sortKey] ? 1 : -1) * this.sortOrder;
    });
  }
}

动态切换排序字段和顺序

通过方法动态修改排序字段和顺序：

methods: {
  changeSort(key) {
    if (this.sortKey === key) {
      this.sortOrder *= -1; // 切换排序方向
    } else {
      this.sortKey = key;
      this.sortOrder = 1; // 默认升序
    }
  }
}

模板中使用示例：

<table>
  <thead>
    <tr>
      <th @click="changeSort('name')">Name</th>
      <th @click="changeSort('value')">Value</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in sortedItems" :key="item.name">
      <td>{{ item.name }}</td>
      <td>{{ item.value }}</td>
    </tr>
  </tbody>
</table>

处理复杂排序逻辑

对于需要多字段排序或复杂逻辑的情况，可以扩展排序函数：

computed: {
  sortedItems() {
    return [...this.items].sort((a, b) => {
      // 主排序字段
      const primary = this.sortKey;
      // 次排序字段（如 name）
      const secondary = 'name';

      if (a[primary] !== b[primary]) {
        return (a[primary] > b[primary] ? 1 : -1) * this.sortOrder;
      } else {
        // 主字段相同时按次字段排序
        return a[secondary].localeCompare(b[secondary]);
      }
    });
  }
}

使用 Lodash 的 orderBy 方法

如果需要更强大的排序功能，可以引入 Lodash 的 orderBy 方法：

import { orderBy } from 'lodash';

computed: {
  sortedItems() {
    return orderBy(
      this.items,
      [this.sortKey],      // 排序字段
      [this.sortOrder > 0 ? 'asc' : 'desc'] // 排序方向
    );
  }
}

注意事项

• 直接修改原始数组会导致 Vue 的响应式系统无法检测变化，应始终返回新数组（如使用扩展运算符 ... 或 slice()）。
• 对于大型数据集，考虑使用分页或虚拟滚动以避免性能问题。
• 字符串排序推荐使用 localeCompare 以获得正确的语言排序规则。