vue实现商品排序

实现商品排序功能

在Vue中实现商品排序功能通常涉及数据绑定、计算属性和方法调用。以下是一个完整的实现方案：

数据准备

定义商品列表数据和排序状态

data() {
  return {
    products: [
      { id: 1, name: '商品A', price: 100, sales: 200 },
      { id: 2, name: '商品B', price: 80, sales: 150 },
      { id: 3, name: '商品C', price: 120, sales: 300 }
    ],
    sortField: '',
    sortDirection: 'asc'
  }
}

计算属性处理排序

使用计算属性实现动态排序

computed: {
  sortedProducts() {
    if (!this.sortField) return this.products

    return [...this.products].sort((a, b) => {
      const modifier = this.sortDirection === 'asc' ? 1 : -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 (this.sortField === field) {
      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc'
    } else {
      this.sortField = field
      this.sortDirection = 'asc'
    }
  }
}

模板实现

在模板中添加排序交互

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

添加排序指示器

改进UI显示当前排序状态

<th @click="sortBy('name')">
  名称 
  <span v-if="sortField === 'name'">
    {{ sortDirection === 'asc' ? '↑' : '↓' }}
  </span>
</th>

多字段排序扩展

如果需要支持多字段排序，可以修改排序逻辑

sortBy(field) {
  if (this.sortField.includes(field)) {
    // 字段已存在时的处理逻辑
  } else {
    this.sortField = [field]
  }
  this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc'
}

使用第三方库

对于复杂排序需求，可以考虑使用lodash的orderBy

import { orderBy } from 'lodash'

computed: {
  sortedProducts() {
    return orderBy(this.products, [this.sortField], [this.sortDirection])
  }
}

以上实现提供了完整的商品排序功能，包括升序降序切换、UI反馈和可扩展的多字段排序支持。根据实际项目需求，可以调整排序逻辑或UI表现。