vue js 实现排序

Vue.js 实现排序的方法

使用 v-for 和 sort 方法

在 Vue.js 中，可以通过 v-for 指令结合 JavaScript 的 sort 方法对数组进行排序。首先，在 data 中定义一个数组，然后在计算属性或方法中实现排序逻辑。

data() {
  return {
    items: [
      { name: 'Item C', id: 3 },
      { name: 'Item A', id: 1 },
      { name: 'Item B', id: 2 }
    ]
  }
},
computed: {
  sortedItems() {
    return this.items.slice().sort((a, b) => a.name.localeCompare(b.name))
  }
}

在模板中使用 sortedItems 进行渲染：

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

动态切换排序方式

可以通过添加一个按钮或下拉菜单来动态切换排序方式。例如，定义一个 sortOrder 变量来控制升序或降序。

data() {
  return {
    items: [
      { name: 'Item C', id: 3 },
      { name: 'Item A', id: 1 },
      { name: 'Item B', id: 2 }
    ],
    sortOrder: 'asc'
  }
},
computed: {
  sortedItems() {
    const order = this.sortOrder === 'asc' ? 1 : -1
    return this.items.slice().sort((a, b) => a.name.localeCompare(b.name) * order)
  }
},
methods: {
  toggleSortOrder() {
    this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
  }
}

在模板中添加一个按钮来切换排序：

<button @click="toggleSortOrder">Toggle Sort Order</button>
<ul>
  <li v-for="item in sortedItems" :key="item.id">{{ item.name }}</li>
</ul>

使用 Lodash 进行复杂排序

对于更复杂的排序需求，可以使用 Lodash 的 orderBy 方法。首先安装 Lodash：

npm install lodash

然后在组件中使用：

import { orderBy } from 'lodash'

data() {
  return {
    items: [
      { name: 'Item C', price: 30 },
      { name: 'Item A', price: 10 },
      { name: 'Item B', price: 20 }
    ],
    sortField: 'name',
    sortDirection: 'asc'
  }
},
computed: {
  sortedItems() {
    return orderBy(this.items, this.sortField, this.sortDirection)
  }
},
methods: {
  changeSort(field) {
    if (this.sortField === field) {
      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc'
    } else {
      this.sortField = field
      this.sortDirection = 'asc'
    }
  }
}

在模板中添加表头点击事件来切换排序字段：

<table>
  <thead>
    <tr>
      <th @click="changeSort('name')">Name</th>
      <th @click="changeSort('price')">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in sortedItems" :key="item.name">
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
    </tr>
  </tbody>
</table>

使用 Vuex 管理排序状态

如果项目使用 Vuex 进行状态管理，可以将排序逻辑放在 Vuex 中。例如，定义一个 sort 模块：

const sortModule = {
  state: {
    items: [
      { name: 'Item C', id: 3 },
      { name: 'Item A', id: 1 },
      { name: 'Item B', id: 2 }
    ],
    sortOrder: 'asc'
  },
  mutations: {
    toggleSortOrder(state) {
      state.sortOrder = state.sortOrder === 'asc' ? 'desc' : 'asc'
    }
  },
  getters: {
    sortedItems(state) {
      const order = state.sortOrder === 'asc' ? 1 : -1
      return state.items.slice().sort((a, b) => a.name.localeCompare(b.name) * order)
    }
  }
}

在组件中通过 mapGetters 和 mapMutations 使用：

import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['sortedItems'])
  },
  methods: {
    ...mapMutations(['toggleSortOrder'])
  }
}

模板中使用：

<button @click="toggleSortOrder">Toggle Sort Order</button>
<ul>
  <li v-for="item in sortedItems" :key="item.id">{{ item.name }}</li>
</ul>