vue 实现排序

Vue 实现排序的方法

在 Vue 中实现排序可以通过多种方式完成，以下是一些常见的方法：

使用计算属性

计算属性可以根据数据的变化动态生成排序后的列表。以下是一个示例：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item A', value: 30 },
        { id: 2, name: 'Item B', value: 10 },
        { id: 3, name: 'Item C', value: 20 }
      ]
    }
  },
  computed: {
    sortedItems() {
      return [...this.items].sort((a, b) => a.value - b.value)
    }
  }
}
</script>

使用方法触发排序

可以通过方法在需要时手动触发排序：

<template>
  <div>
    <button @click="sortItems">Sort</button>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item A', value: 30 },
        { id: 2, name: 'Item B', value: 10 },
        { id: 3, name: 'Item C', value: 20 }
      ]
    }
  },
  methods: {
    sortItems() {
      this.items.sort((a, b) => a.value - b.value)
    }
  }
}
</script>

使用 Lodash 进行复杂排序

对于更复杂的排序需求，可以使用 Lodash 库：

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

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item A', value: 30 },
        { id: 2, name: 'Item B', value: 10 },
        { id: 3, name: 'Item C', value: 20 }
      ]
    }
  },
  computed: {
    sortedItems() {
      return _.orderBy(this.items, ['value'], ['asc'])
    }
  }
}
</script>

动态排序方向

可以通过数据绑定实现动态切换排序方向：

<template>
  <div>
    <button @click="toggleSort">Toggle Sort Direction</button>
    <ul>
      <li v-for="item in sortedItems" :key="item.id">
        {{ item.name }} - {{ item.value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item A', value: 30 },
        { id: 2, name: 'Item B', value: 10 },
        { id: 3, name: 'Item C', value: 20 }
      ],
      sortDirection: 'asc'
    }
  },
  computed: {
    sortedItems() {
      const direction = this.sortDirection === 'asc' ? 1 : -1
      return [...this.items].sort((a, b) => (a.value - b.value) * direction)
    }
  },
  methods: {
    toggleSort() {
      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc'
    }
  }
}
</script>

表格列排序

在表格中实现列排序：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th @click="sortBy('name')">Name</th>
          <th @click="sortBy('value')">Value</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in sortedItems" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item A', value: 30 },
        { id: 2, name: 'Item B', value: 10 },
        { id: 3, name: 'Item C', value: 20 }
      ],
      sortKey: '',
      sortDirection: 'asc'
    }
  },
  computed: {
    sortedItems() {
      if (!this.sortKey) return this.items

      const direction = this.sortDirection === 'asc' ? 1 : -1
      return [...this.items].sort((a, b) => {
        if (a[this.sortKey] < b[this.sortKey]) return -1 * direction
        if (a[this.sortKey] > b[this.sortKey]) return 1 * direction
        return 0
      })
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortKey = key
        this.sortDirection = 'asc'
      }
    }
  }
}
</script>

这些方法覆盖了 Vue 中实现排序的常见场景，可以根据具体需求选择合适的方式。