当前位置：首页 > VUE

vue点击实现升降排序

2026-01-22 23:47:16VUE

实现点击升降序排序

在Vue中实现点击表格头切换升降序排序，可以通过以下方法完成：

数据准备

data() {
  return {
    items: [
      { id: 1, name: 'Apple', price: 5 },
      { id: 2, name: 'Banana', price: 3 },
      { id: 3, name: 'Orange', price: 4 }
    ],
    sortKey: '',
    sortOrder: 1 // 1升序，-1降序
  }
}

排序方法实现

methods: {
  sortBy(key) {
    if (this.sortKey === key) {
      this.sortOrder *= -1
    } else {
      this.sortKey = key
      this.sortOrder = 1
    }

    this.items.sort((a, b) => {
      if (a[key] < b[key]) return -1 * this.sortOrder
      if (a[key] > b[key]) return 1 * this.sortOrder
      return 0
    })
  }
}

模板中使用

vue点击实现升降排序

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

添加排序状态指示

可以添加箭头图标显示当前排序状态

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

使用计算属性优化

将排序逻辑移至计算属性，避免直接修改原始数据

vue点击实现升降排序

computed: {
  sortedItems() {
    return [...this.items].sort((a, b) => {
      if (a[this.sortKey] < b[this.sortKey]) return -1 * this.sortOrder
      if (a[this.sortKey] > b[this.sortKey]) return 1 * this.sortOrder
      return 0
    })
  }
}

模板中改为使用sortedItems替代items

封装为可复用组件

可以创建一个可复用的排序表格组件

Vue.component('sortable-table', {
  props: ['data', 'columns'],
  data() {
    return {
      sortKey: '',
      sortOrder: 1
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortOrder *= -1
      } else {
        this.sortKey = key
        this.sortOrder = 1
      }
    }
  },
  computed: {
    sortedData() {
      return [...this.data].sort((a, b) => {
        if (a[this.sortKey] < b[this.sortKey]) return -1 * this.sortOrder
        if (a[this.sortKey] > b[this.sortKey]) return 1 * this.sortOrder
        return 0
      })
    }
  }
})

处理数字和字符串排序

对于数字类型字段，需要特殊处理以确保正确排序

sortBy(key) {
  // 判断字段是否为数字类型
  const isNumeric = this.items.every(item => typeof item[key] === 'number')

  if (this.sortKey === key) {
    this.sortOrder *= -1
  } else {
    this.sortKey = key
    this.sortOrder = 1
  }

  this.items.sort((a, b) => {
    if (isNumeric) {
      return (a[key] - b[key]) * this.sortOrder
    }
    return String(a[key]).localeCompare(String(b[key])) * this.sortOrder
  })
}

标签: vue