当前位置：首页 > VUE

vue 实现排序

2026-01-07 20:53:04VUE

Vue 实现排序的方法

使用计算属性实现排序

通过计算属性对数组进行排序，可以保持原始数据不变。示例代码展示了如何对列表按名称升序排序：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item C', value: 30 },
        { id: 2, name: 'Item A', value: 10 },
        { id: 3, name: 'Item B', value: 20 }
      ]
    }
  },
  computed: {
    sortedItems() {
      return [...this.items].sort((a, b) => a.name.localeCompare(b.name))
    }
  }
}
</script>

使用方法实现动态排序

通过方法实现动态排序，可以根据用户选择改变排序方式：

<template>
  <div>
    <button @click="sortBy('name')">Sort by Name</button>
    <button @click="sortBy('value')">Sort by Value</button>
    <ul>
      <li v-for="item in sortedItems" :key="item.id">
        {{ item.name }} - {{ item.value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item C', value: 30 },
        { id: 2, name: 'Item A', value: 10 },
        { id: 3, name: 'Item B', value: 20 }
      ],
      sortKey: 'name'
    }
  },
  computed: {
    sortedItems() {
      return [...this.items].sort((a, b) => {
        if (this.sortKey === 'name') {
          return a.name.localeCompare(b.name)
        } else {
          return a.value - b.value
        }
      })
    }
  },
  methods: {
    sortBy(key) {
      this.sortKey = key
    }
  }
}
</script>

使用第三方库实现复杂排序

对于复杂排序需求，可以使用lodash等工具库：

import _ from 'lodash'

export default {
  computed: {
    sortedItems() {
      return _.orderBy(this.items, [this.sortKey], [this.sortOrder])
    }
  },
  data() {
    return {
      sortKey: 'name',
      sortOrder: 'asc'
    }
  }
}

表格列排序实现

在表格组件中实现列排序功能：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item C', value: 30 },
        { id: 2, name: 'Item A', value: 10 },
        { id: 3, name: 'Item B', value: 20 }
      ],
      sortKey: '',
      sortDirection: 1
    }
  },
  computed: {
    sortedItems() {
      if (!this.sortKey) return this.items

      return [...this.items].sort((a, b) => {
        if (a[this.sortKey] < b[this.sortKey]) return -1 * this.sortDirection
        if (a[this.sortKey] > b[this.sortKey]) return 1 * this.sortDirection
        return 0
      })
    }
  },
  methods: {
    sort(key) {
      if (this.sortKey === key) {
        this.sortDirection *= -1
      } else {
        this.sortKey = key
        this.sortDirection = 1
      }
    }
  }
}
</script>

使用Vuex管理排序状态

在大型应用中，可以使用Vuex集中管理排序状态：

// store.js
export default new Vuex.Store({
  state: {
    items: [
      { id: 1, name: 'Item C', value: 30 },
      { id: 2, name: 'Item A', value: 10 },
      { id: 3, name: 'Item B', value: 20 }
    ],
    sortKey: 'name',
    sortOrder: 'asc'
  },
  getters: {
    sortedItems: state => {
      return [...state.items].sort((a, b) => {
        if (state.sortOrder === 'asc') {
          return a[state.sortKey] > b[state.sortKey] ? 1 : -1
        } else {
          return a[state.sortKey] < b[state.sortKey] ? 1 : -1
        }
      })
    }
  },
  mutations: {
    setSort(state, payload) {
      state.sortKey = payload.key
      state.sortOrder = payload.order
    }
  }
})

这些方法涵盖了从简单到复杂的各种排序场景，可以根据具体需求选择适合的实现方式。

vue 实现排序