当前位置：首页 > article >正文

【VUE3】Vue 3 中列表排序：单字段与多字段排序实现方案

article 2025/2/22 3:45:49

在这里插入图片描述

在前端开发中，对数据列表进行排序是一个常见的需求。在 Vue 3 里，我们可以方便地实现根据单个字段或者多个字段对列表进行排序。本文将深入探讨如何在 Vue 3 中完成这些排序操作，涵盖组合式 API 和选项式 API 两种实现方式，并详细解释其中的原理。

单字段排序

原理

单字段排序的核心是使用 JavaScript 数组的 sort 方法。sort 方法接受一个比较函数作为参数，通过比较函数的返回值来确定元素的顺序。比较函数接收两个参数，通常表示为 a 和 b，如果返回值小于 0，则 a 排在 b 前面；如果返回值大于 0，则 a 排在 b 后面；如果返回值等于 0，则元素顺序不变。

组合式 API 实现

<template>
  <div>
    <button @click="sortByAgeAsc">按年龄升序排序</button>
    <button @click="sortByAgeDesc">按年龄降序排序</button>
    <ul>
      <li v-for="person in sortedList" :key="person.id">
        {{ person.name }} - {{ person.age }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 20 },
  { id: 3, name: 'Charlie', age: 30 }
]);

const sortedList = ref([...list.value]);

const sortByAgeAsc = () => {
  sortedList.value = [...list.value].sort((a, b) => a.age - b.age);
};

const sortByAgeDesc = () => {
  sortedList.value = [...list.value].sort((a, b) => b.age - a.age);
};
</script>

代码解释

数据定义：使用 ref 创建响应式数据 list 存储原始数据，sortedList 存储排序后的数据。
排序函数：sortByAgeAsc 函数通过 a.age - b.age 实现年龄升序排序，sortByAgeDesc 函数通过 b.age - a.age 实现年龄降序排序。

选项式 API 实现

<template>
  <div>
    <button @click="sortByAgeAsc">按年龄升序排序</button>
    <button @click="sortByAgeDesc">按年龄降序排序</button>
    <ul>
      <li v-for="person in sortedList" :key="person.id">
        {{ person.name }} - {{ person.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 20 },
        { id: 3, name: 'Charlie', age: 30 }
      ],
      sortedList: []
    };
  },
  created() {
    this.sortedList = [...this.list];
  },
  methods: {
    sortByAgeAsc() {
      this.sortedList = [...this.list].sort((a, b) => a.age - b.age);
    },
    sortByAgeDesc() {
      this.sortedList = [...this.list].sort((a, b) => b.age - a.age);
    }
  }
};
</script>

代码解释

数据定义：在 data 选项中定义 list 和 sortedList。
生命周期钩子：在 created 钩子中初始化 sortedList。
方法定义：sortByAgeAsc 和 sortByAgeDesc 方法实现排序逻辑。

多字段排序

原理

多字段排序是在单字段排序的基础上，当第一个字段相等时，再根据第二个字段进行排序，以此类推。通过在比较函数中添加多个比较条件来实现。

组合式 API 实现

<template>
  <div>
    <button @click="sortList">按年龄和名字排序</button>
    <ul>
      <li v-for="person in sortedList" :key="person.id">
        {{ person.name }} - {{ person.age }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 25 },
  { id: 3, name: 'Charlie', age: 30 },
  { id: 4, name: 'Alice', age: 20 }
]);

const sortedList = ref([...list.value]);

const sortList = () => {
  sortedList.value = [...list.value].sort((a, b) => {
    if (a.age !== b.age) {
      return a.age - b.age;
    }
    return a.name.localeCompare(b.name);
  });
};
</script>

代码解释

数据定义：同单字段排序。
排序函数：先比较 age 字段，如果 age 不同则按 age 升序排序；如果 age 相同，则使用 localeCompare 方法按 name 字段的字母顺序排序。

选项式 API 实现

<template>
  <div>
    <button @click="sortList">按年龄和名字排序</button>
    <ul>
      <li v-for="person in sortedList" :key="person.id">
        {{ person.name }} - {{ person.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 25 },
        { id: 3, name: 'Charlie', age: 30 },
        { id: 4, name: 'Alice', age: 20 }
      ],
      sortedList: []
    };
  },
  created() {
    this.sortedList = [...this.list];
  },
  methods: {
    sortList() {
      this.sortedList = [...this.list].sort((a, b) => {
        if (a.age !== b.age) {
          return a.age - b.age;
        }
        return a.name.localeCompare(b.name);
      });
    }
  }
};
</script>

代码解释

数据定义：在 data 选项中定义 list 和 sortedList。
生命周期钩子：在 created 钩子中初始化 sortedList。
方法定义：sortList 方法实现多字段排序逻辑。

总结

在 Vue 3 中进行列表排序，无论是单字段还是多字段排序，核心都是利用 JavaScript 数组的 sort 方法。通过组合式 API 或选项式 API，我们可以根据项目需求选择合适的实现方式。组合式 API 更适合处理复杂逻辑和复用代码，而选项式 API 则更符合传统 Vue 开发者的习惯。掌握这些排序方法，能让我们在处理数据展示时更加得心应手。

查看全文

http://www.kler.cn/a/555562.html