vue实现点击排序

Vue实现点击排序功能

可以通过以下几种方式实现点击排序功能：

使用计算属性排序

在Vue组件中定义一个计算属性，根据点击的排序条件对数据进行排序：

data() {
  return {
    items: [
      { id: 1, name: 'Apple', price: 5 },
      { id: 2, name: 'Banana', price: 3 },
      { id: 3, name: 'Orange', price: 4 }
    ],
    sortKey: '',
    sortOrder: 1 // 1表示升序，-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.sortOrder
      if (a[this.sortKey] > b[this.sortKey]) return 1 * this.sortOrder
      return 0
    })
  }
},
methods: {
  sortBy(key) {
    if (this.sortKey === key) {
      this.sortOrder *= -1
    } else {
      this.sortKey = key
      this.sortOrder = 1
    }
  }
}

使用v-for渲染排序结果

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

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

使用第三方库

对于更复杂的排序需求，可以使用lodash的orderBy方法：

import { orderBy } from 'lodash'

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

多列排序实现

需要同时按多个字段排序时：

computed: {
  sortedItems() {
    return [...this.items].sort((a, b) => {
      // 主排序字段
      if (a[this.primarySort] !== b[this.primarySort]) {
        return (a[this.primarySort] < b[this.primarySort] ? -1 : 1) * this.primaryOrder
      }
      // 次排序字段
      if (a[this.secondarySort] !== b[this.secondarySort]) {
        return (a[this.secondarySort] < b[this.secondarySort] ? -1 : 1) * this.secondaryOrder
      }
      return 0
    })
  }
}

添加排序指示器

在模板中添加排序状态指示：

<th @click="sortBy('name')">
  Name
  <span v-if="sortKey === 'name'">
    {{ sortOrder === 1 ? '↑' : '↓' }}
  </span>
</th>

以上方法可以根据实际需求选择使用，计算属性方式适合大多数简单排序场景，而lodash等库则提供了更强大的排序功能。