当前位置：首页 > VUE

vue点击实现排序

2026-01-07 01:31:16VUE

实现点击排序的方法

在Vue中实现点击排序功能，可以通过以下几种方式完成：

使用计算属性结合排序方法

定义一个响应式数据存储排序状态，通过计算属性动态返回排序后的数组。点击事件切换排序状态。

data() {
  return {
    items: [
      { id: 1, name: 'Item A', value: 10 },
      { id: 2, name: 'Item B', value: 5 },
      { id: 3, name: 'Item C', value: 20 }
    ],
    sortKey: '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: {
  toggleSort(key) {
    if (this.sortKey === key) {
      this.sortOrder *= -1
    } else {
      this.sortKey = key
      this.sortOrder = 1
    }
  }
}

模板中使用v-for渲染排序后的数据

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

使用lodash的orderBy方法

安装lodash后，可以使用更强大的排序功能：

import { orderBy } from 'lodash'

methods: {
  sortItems(key) {
    this.items = orderBy(this.items, [key], [this.sortOrder === 1 ? 'asc' : 'desc'])
    this.sortOrder *= -1
  }
}

多列排序实现

对于需要多列排序的场景，可以扩展排序逻辑：

vue点击实现排序

data() {
  return {
    sortConfig: [
      { key: 'value', order: 'asc' },
      { key: 'name', order: 'asc' }
    ]
  }
},
methods: {
  applySort() {
    this.items = orderBy(
      this.items,
      this.sortConfig.map(s => s.key),
      this.sortConfig.map(s => s.order)
    )
  },
  toggleSort(key) {
    const config = this.sortConfig.find(c => c.key === key)
    if (config) {
      config.order = config.order === 'asc' ? 'desc' : 'asc'
    } else {
      this.sortConfig.push({ key, order: 'asc' })
    }
    this.applySort()
  }
}