vue实现点击排序

Vue 实现点击排序

使用计算属性进行排序

通过计算属性对数组进行排序，可以动态响应数据变化。定义一个排序方法，在点击事件中切换排序方式。

<template>
  <div>
    <button @click="toggleSort">按名称排序</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' }
      ],
      sortDirection: 'asc'
    }
  },
  computed: {
    sortedItems() {
      return [...this.items].sort((a, b) => {
        if (this.sortDirection === 'asc') {
          return a.name.localeCompare(b.name)
        } else {
          return b.name.localeCompare(a.name)
        }
      })
    }
  },
  methods: {
    toggleSort() {
      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc'
    }
  }
}
</script>

使用自定义排序方法

对于复杂排序逻辑，可以定义独立的排序方法并在模板中调用。

<template>
  <div>
    <button @click="sortBy('name')">按名称排序</button>
    <button @click="sortBy('price')">按价格排序</button>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
  </div>
</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: '',
      sortDirection: 1
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortDirection *= -1
      } else {
        this.sortKey = key
        this.sortDirection = 1
      }
      this.items.sort((a, b) => {
        return (a[key] > b[key] ? 1 : -1) * this.sortDirection
      })
    }
  }
}
</script>

使用第三方库实现复杂排序

对于大型项目或复杂排序需求，可以使用lodash等工具库简化排序逻辑。

<template>
  <div>
    <button @click="sortItems">排序</button>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} ({{ item.date }})
      </li>
    </ul>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Task A', date: '2023-01-15' },
        { id: 2, name: 'Task B', date: '2023-01-10' },
        { id: 3, name: 'Task C', date: '2023-01-20' }
      ],
      isSorted: false
    }
  },
  methods: {
    sortItems() {
      this.items = _.orderBy(
        this.items,
        ['date'],
        [this.isSorted ? 'desc' : 'asc']
      )
      this.isSorted = !this.isSorted
    }
  }
}
</script>

多列排序实现

实现多列排序功能，允许用户按不同字段组合排序。

<template>
  <div>
    <button @click="sortByMultiple(['name', 'price'])">多列排序</button>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - ${{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Banana', price: 2 },
        { id: 2, name: 'Apple', price: 1 },
        { id: 3, name: 'Apple', price: 3 }
      ]
    }
  },
  methods: {
    sortByMultiple(keys) {
      this.items.sort((a, b) => {
        for (const key of keys) {
          if (a[key] !== b[key]) {
            return a[key] > b[key] ? 1 : -1
          }
        }
        return 0
      })
    }
  }
}
</script>

表格排序组件

创建一个可复用的表格排序组件，支持动态列排序。

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

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      sortKey: '',
      sortOrder: 'asc'
    }
  },
  computed: {
    sortedData() {
      if (!this.sortKey) return this.data
      return [...this.data].sort((a, b) => {
        const modifier = this.sortOrder === 'asc' ? 1 : -1
        return a[this.sortKey] > b[this.sortKey] ? modifier : -modifier
      })
    }
  },
  methods: {
    sort(key) {
      if (this.sortKey === key) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortKey = key
        this.sortOrder = 'asc'
      }
    }
  }
}
</script>

以上方法涵盖了Vue中实现点击排序的常见场景，从简单到复杂排序需求均可满足。根据项目实际需求选择合适的方法即可。