Vue.js 2.X + Electron列表双向排序功能实现求助

嘿，我明白你现在的困扰——刚接触Vue2和Electron，想实现点击同一表头切换升降序排序对吧？你之前的思路方向是对的，但缺了个关键：没记录当前的排序方向，所以每次点击都只会重新按正序排，自然没法实现反转效果。我给你调整一下代码，既能实现切换功能，还能简化重复的代码~

第一步：添加排序状态 #

先在data里新增两个状态，用来跟踪当前排序的字段和方向：

export default {
  name: 'home-page',
  data() {
    return {
      sortKey: null, // 当前正在排序的字段（可选值：id/name/leave）
      sortOrder: 1, // 1代表升序，-1代表降序，切换时取反即可
      items: [
        { id: 1, name: 'Person 1', leave: 123.45 },
        { id: 2, name: 'John Smith', leave: 13.45 },
        { id: 3, name: 'Bill Smith', leave: 23.45 },
        { id: 4, name: 'John Doe', leave: 133.53 }
      ]
    }
  },
  // ... 后续方法写在这里
}

第二步：合并为通用排序方法 #

你之前写了三个几乎一样的排序函数，其实可以合并成一个通用方法，减少重复代码：

methods: {
  sortBy(key) {
    // 如果点击的是当前已排序的字段，就切换排序方向
    if (this.sortKey === key) {
      this.sortOrder *= -1;
    } else {
      // 如果是新字段，默认设置为升序
      this.sortKey = key;
      this.sortOrder = 1;
    }

    // 核心排序逻辑，结合sortOrder控制升降
    this.items.sort((a, b) => {
      // 区分字符串和数字的比较逻辑
      if (typeof a[key] === 'string') {
        // 转小写避免大小写干扰排序结果（比如"John"和"bill"）
        const valA = a[key].toLowerCase();
        const valB = b[key].toLowerCase();
        if (valA < valB) return -1 * this.sortOrder;
        if (valA > valB) return 1 * this.sortOrder;
        return 0;
      } else {
        // 数字类型直接做减法，再乘以排序方向
        return (a[key] - b[key]) * this.sortOrder;
      }
    });
  }
}

第三步：修改模板中的点击事件 #

把原来三个单独的点击事件，改成调用同一个sortBy方法，传入对应的字段名即可：

<template>
  <a v-on:click="sortBy('id')">ID</a>
  <a v-on:click="sortBy('name')">User</a>
  <a v-on:click="sortBy('leave')">Leave Owing</a>

  <div id="page_list">
    <!-- 记得给v-for加上唯一key，Vue2要求必须有哦 -->
    <div class="user_row" v-for="item in items" :key="item.id">
      <div class="user_status">{{ item.id }}</div>
      <div class="username">{{ item.name }}</div>
      <div class="leave_owing">{{ item.leave }}</div>
    </div>
  </div>
</template>

为什么之前的reverse没效果？ #

你之前尝试用return this.items.reverse()没成功，是因为sort方法是原地修改数组的：第一次点击排序后数组已经是正序，reverse会变成倒序，但下次再点击同一个排序方法，又会重新执行sort把数组变回正序，所以看起来像是没反转。而我们现在的方法是每次排序都根据当前的sortOrder动态调整方向，就不会有这个问题啦。

内容的提问来源于stack exchange，提问作者SamohtVII