当前位置：首页 > VUE

vue实现列表排序

2026-02-19 16:27:18VUE

Vue 列表排序实现方法

在 Vue 中实现列表排序可以通过多种方式完成，以下是几种常见的方法：

使用计算属性排序

计算属性非常适合处理需要动态排序的场景，当依赖的数据变化时，计算属性会自动重新计算排序结果。

vue实现列表排序

<template>
  <ul>
    <li v-for="item in sortedItems" :key="item.id">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
  <button @click="sortOrder = 'asc'">升序</button>
  <button @click="sortOrder = 'desc'">降序</button>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '商品A', price: 100 },
        { id: 2, name: '商品B', price: 50 },
        { id: 3, name: '商品C', price: 75 }
      ],
      sortOrder: 'asc'
    }
  },
  computed: {
    sortedItems() {
      return [...this.items].sort((a, b) => {
        return this.sortOrder === 'asc' 
          ? a.price - b.price 
          : b.price - a.price
      })
    }
  }
}
</script>

使用 Lodash 排序函数

Lodash 提供了更强大的排序功能，适合复杂排序需求。

vue实现列表排序

import _ from 'lodash'

computed: {
  sortedItems() {
    return _.orderBy(
      this.items,
      ['price'], // 排序字段
      [this.sortOrder] // 排序方向
    )
  }
}

服务端排序

对于大数据集，建议在服务端完成排序后返回结果。

methods: {
  async fetchSortedData(order) {
    const response = await axios.get(`/api/items?sort=${order}`)
    this.items = response.data
  }
}

多列排序

实现多列排序需要更复杂的比较逻辑。

computed: {
  sortedItems() {
    return [...this.items].sort((a, b) => {
      // 先按价格排序
      const priceCompare = a.price - b.price
      if (priceCompare !== 0) return this.sortOrder === 'asc' ? priceCompare : -priceCompare

      // 价格相同再按名称排序
      const nameCompare = a.name.localeCompare(b.name)
      return this.sortOrder === 'asc' ? nameCompare : -nameCompare
    })
  }
}