vue js 实现排序

Vue.js 实现排序的方法

在 Vue.js 中实现排序可以通过多种方式完成，包括使用计算属性、方法或直接操作数据。以下是几种常见的实现方式：

使用计算属性排序

计算属性可以自动响应数据变化并重新计算排序结果。例如，对一个数组进行升序或降序排序：

<template>
  <div>
    <button @click="sortOrder = 'asc'">升序</button>
    <button @click="sortOrder = 'desc'">降序</button>
    <ul>
      <li v-for="item in sortedItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Banana' },
        { id: 2, name: 'Apple' },
        { id: 3, name: 'Orange' }
      ],
      sortOrder: 'asc'
    };
  },
  computed: {
    sortedItems() {
      return [...this.items].sort((a, b) => {
        if (this.sortOrder === 'asc') {
          return a.name.localeCompare(b.name);
        } else {
          return b.name.localeCompare(a.name);
        }
      });
    }
  }
};
</script>

使用方法触发排序

可以通过调用方法动态改变排序逻辑，适用于需要更复杂排序规则的场景：

<template>
  <div>
    <button @click="sortBy('name')">按名称排序</button>
    <button @click="sortBy('id')">按ID排序</button>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 3, name: 'Orange' },
        { id: 1, name: 'Banana' },
        { id: 2, name: 'Apple' }
      ]
    };
  },
  methods: {
    sortBy(key) {
      this.items.sort((a, b) => a[key] > b[key] ? 1 : -1);
    }
  }
};
</script>

使用 Lodash 进行复杂排序

对于更复杂的排序需求（如多字段排序或自定义规则），可以使用 Lodash 的 orderBy 方法：

<template>
  <div>
    <ul>
      <li v-for="item in sortedItems" :key="item.id">
        {{ item.name }} ({{ item.price }})
      </li>
    </ul>
  </div>
</template>

<script>
import _ from 'lodash';

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Banana', price: 2 },
        { id: 2, name: 'Apple', price: 1 },
        { id: 3, name: 'Orange', price: 3 }
      ],
      sortConfig: { key: 'name', order: 'asc' }
    };
  },
  computed: {
    sortedItems() {
      return _.orderBy(
        this.items,
        [this.sortConfig.key],
        [this.sortConfig.order]
      );
    }
  }
};
</script>

表格列的动态排序

在表格中实现点击表头排序的功能：

<template>
  <table>
    <thead>
      <tr>
        <th @click="sortBy('name')">名称</th>
        <th @click="sortBy('price')">价格</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in sortedItems" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Banana', price: 2 },
        { id: 2, name: 'Apple', price: 1 },
        { id: 3, name: 'Orange', price: 3 }
      ],
      sortKey: 'name',
      sortOrder: 'asc'
    };
  },
  computed: {
    sortedItems() {
      const order = this.sortOrder === 'asc' ? 1 : -1;
      return [...this.items].sort((a, b) => {
        if (a[this.sortKey] < b[this.sortKey]) return -1 * order;
        if (a[this.sortKey] > b[this.sortKey]) return 1 * order;
        return 0;
      });
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortKey = key;
        this.sortOrder = 'asc';
      }
    }
  }
};
</script>

以上方法可以根据具体需求灵活组合使用，实现 Vue.js 中的各种排序功能。