vue点击实现排序

实现点击排序功能

在Vue中实现点击排序功能，可以通过数据绑定和计算属性结合实现。以下是一个常见的实现方式：

模板部分

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th @click="sortBy('name')">姓名</th>
          <th @click="sortBy('age')">年龄</th>
          <th @click="sortBy('score')">分数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in sortedItems" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.score }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '张三', age: 20, score: 85 },
        { id: 2, name: '李四', age: 22, score: 90 },
        { id: 3, name: '王五', age: 19, score: 78 }
      ],
      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
      }
    }
  }
}
</script>

多列排序实现

如果需要实现更复杂的多列排序，可以扩展上述方法：

data() {
  return {
    sortParams: []
  }
},
methods: {
  sortBy(key) {
    const existingSort = this.sortParams.find(param => param.key === key)

    if (existingSort) {
      existingSort.order *= -1
    } else {
      this.sortParams.push({ key, order: 1 })
    }
  }
},
computed: {
  sortedItems() {
    return [...this.items].sort((a, b) => {
      for (const param of this.sortParams) {
        const { key, order } = param
        if (a[key] < b[key]) return -1 * order
        if (a[key] > b[key]) return 1 * order
      }
      return 0
    })
  }
}

使用第三方库

对于更复杂的排序需求，可以考虑使用lodash的排序函数：

import { orderBy } from 'lodash'

computed: {
  sortedItems() {
    return orderBy(
      this.items,
      this.sortParams.map(p => p.key),
      this.sortParams.map(p => p.order > 0 ? 'asc' : 'desc')
    )
  }
}

添加排序状态指示

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

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

这些方法提供了从简单到复杂的点击排序实现方案，可以根据实际需求选择适合的方式。