当前位置：首页 > VUE

vue实现前端排序

2026-02-11 03:47:52VUE

Vue 实现前端排序的方法

使用 `Array.sort()` 方法

Vue 中可以结合 JavaScript 的 Array.sort() 方法对数据进行排序。通过计算属性或方法返回排序后的数组，确保数据响应式更新。

<template>
  <div>
    <button @click="sortData">按年龄排序</button>
    <ul>
      <li v-for="item in sortedData" :key="item.id">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

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

使用 Lodash 库

Lodash 提供更丰富的排序功能，例如按多个字段排序或自定义排序规则。

<template>
  <div>
    <button @click="sortByName">按名字排序</button>
    <ul>
      <li v-for="item in sortedPeople" :key="item.id">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
import _ from 'lodash';

export default {
  data() {
    return {
      people: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        { id: 3, name: 'Charlie', age: 20 }
      ],
      sortKey: 'name'
    };
  },
  computed: {
    sortedPeople() {
      return _.orderBy(this.people, [this.sortKey], ['asc']);
    }
  },
  methods: {
    sortByName() {
      this.sortKey = 'name';
    }
  }
};
</script>

表格列排序

在表格中实现点击表头排序的功能，可以通过动态切换排序字段和方向实现。

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

<script>
export default {
  data() {
    return {
      people: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        { id: 3, name: 'Charlie', age: 20 }
      ],
      sortField: 'name',
      sortDirection: 'asc'
    };
  },
  computed: {
    sortedData() {
      return [...this.people].sort((a, b) => {
        let modifier = 1;
        if (this.sortDirection === 'desc') modifier = -1;
        if (a[this.sortField] < b[this.sortField]) return -1 * modifier;
        if (a[this.sortField] > b[this.sortField]) return 1 * modifier;
        return 0;
      });
    }
  },
  methods: {
    sortBy(field) {
      if (field === this.sortField) {
        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortField = field;
        this.sortDirection = 'asc';
      }
    }
  }
};
</script>

自定义排序函数

对于复杂排序逻辑，可以定义自定义排序函数并在 sort() 方法中使用。

vue实现前端排序

<template>
  <div>
    <button @click="sortByComplexRule">自定义排序</button>
    <ul>
      <li v-for="item in sortedData" :key="item.id">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        { id: 3, name: 'Charlie', age: 20 }
      ]
    };
  },
  computed: {
    sortedData() {
      return this.customSort([...this.people]);
    }
  },
  methods: {
    customSort(array) {
      return array.sort((a, b) => {
        // 自定义排序逻辑，例如按名字长度和年龄组合排序
        const nameCompare = a.name.length - b.name.length;
        if (nameCompare !== 0) return nameCompare;
        return a.age - b.age;
      });
    },
    sortByComplexRule() {
      // 触发计算属性更新
      this.people = [...this.people];
    }
  }
};
</script>