当前位置：首页 > VUE

vue实现前端排序

2026-03-28 13:56:44VUE

Vue 实现前端排序的方法

使用 `Array.prototype.sort()`

在 Vue 中可以直接调用 JavaScript 的 sort() 方法对数组进行排序。通过计算属性或方法返回排序后的数据，避免直接修改原始数据。

data() {
  return {
    items: [
      { id: 1, name: 'Apple', price: 2.5 },
      { id: 2, name: 'Banana', price: 1.5 },
      { id: 3, name: 'Orange', price: 3.0 }
    ]
  }
},
computed: {
  sortedItems() {
    return [...this.items].sort((a, b) => a.price - b.price);
  }
}

结合 `v-for` 渲染排序结果

在模板中直接使用计算属性 sortedItems 渲染排序后的列表。

vue实现前端排序

<ul>
  <li v-for="item in sortedItems" :key="item.id">
    {{ item.name }} - ${{ item.price }}
  </li>
</ul>

动态排序（根据用户选择）

通过绑定用户选择的排序字段（如价格或名称），动态调整排序逻辑。

vue实现前端排序

data() {
  return {
    items: [
      { id: 1, name: 'Apple', price: 2.5 },
      { id: 2, name: 'Banana', price: 1.5 },
      { id: 3, name: 'Orange', price: 3.0 }
    ],
    sortField: 'price',
    sortOrder: 1 // 1 为升序，-1 为降序
  }
},
computed: {
  sortedItems() {
    return [...this.items].sort((a, b) => {
      if (a[this.sortField] < b[this.sortField]) return -1 * this.sortOrder;
      if (a[this.sortField] > b[this.sortField]) return 1 * this.sortOrder;
      return 0;
    });
  }
}

使用 Lodash 的 `orderBy`

如果需要更复杂的排序（如多字段排序），可以使用 Lodash 的 orderBy 方法。

import { orderBy } from 'lodash';

computed: {
  sortedItems() {
    return orderBy(this.items, [this.sortField], [this.sortOrder > 0 ? 'asc' : 'desc']);
  }
}

表格排序示例

在表格中点击表头切换排序字段和方向。

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

methods: {
  toggleSort(field) {
    if (this.sortField === field) {
      this.sortOrder *= -1;
    } else {
      this.sortField = field;
      this.sortOrder = 1;
    }
  }
}