vue实现表格排序

实现表格排序的基本思路

在Vue中实现表格排序通常需要以下步骤：监听表头点击事件，动态修改数据排序方式，重新渲染表格。Vue的响应式特性使得数据变化后视图会自动更新。

基础实现方法

创建表格数据数组和排序状态变量

data() {
  return {
    tableData: [
      { id: 1, name: 'John', age: 25 },
      { id: 2, name: 'Alice', age: 30 },
      { id: 3, name: 'Bob', age: 22 }
    ],
    sortKey: '',
    sortOrder: 1 // 1为升序，-1为降序
  }
}

添加排序方法

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

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

模板部分

<table>
  <thead>
    <tr>
      <th @click="sortTable('id')">ID</th>
      <th @click="sortTable('name')">Name</th>
      <th @click="sortTable('age')">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in tableData" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </tbody>
</table>

高级实现技巧

添加排序指示箭头

computed: {
  sortIndicator() {
    return (key) => {
      if (this.sortKey !== key) return ''
      return this.sortOrder === 1 ? '↑' : '↓'
    }
  }
}

在表头中使用计算属性

<th @click="sortTable('name')">Name {{ sortIndicator('name') }}</th>

支持多列排序

data() {
  return {
    sortParams: [] // 存储多个排序条件
  }
},
methods: {
  sortTable(key) {
    const existingSort = this.sortParams.find(s => s.key === key)

    if (existingSort) {
      existingSort.order *= -1
    } else {
      this.sortParams.push({ key, order: 1 })
    }

    this.tableData.sort((a, b) => {
      for (const sort of this.sortParams) {
        const compare = a[sort.key].localeCompare(b[sort.key])
        if (compare !== 0) return compare * sort.order
      }
      return 0
    })
  }
}

性能优化建议

对于大数据量表格，考虑使用虚拟滚动技术避免渲染所有行。可以使用第三方库如vue-virtual-scroller。

import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

components: {
  RecycleScroller
}

虚拟滚动模板示例

<RecycleScroller
  class="scroller"
  :items="tableData"
  :item-size="50"
  key-field="id"
>
  <template v-slot="{ item }">
    <tr>
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </template>
</RecycleScroller>

第三方组件方案

使用成熟的UI组件库可以快速实现表格排序功能：

Element UI示例

<el-table
  :data="tableData"
  @sort-change="handleSortChange"
>
  <el-table-column
    prop="date"
    label="Date"
    sortable
  ></el-table-column>
</el-table>

Vuetify示例

<v-data-table
  :headers="headers"
  :items="desserts"
  :sort-by="['calories']"
  :sort-desc="[false]"
  multi-sort
></v-data-table>