Vue.js+Element Plus表格排序问题：如何实现全量数据而非单页排序

核心逻辑是先对全量数据排序，再执行分页切割，而不是先分页再排序。下面是具体的修改步骤：

1. 添加排序状态变量 #

在组件的data中新增两个变量，用来记录当前的排序字段和排序顺序：

data() {
  return {
    // 原有变量保留
    tableData: [],
    page: 1,
    pageSize: 10,
    tableKey: 0,
    // 新增排序状态
    sortProp: '',
    sortOrder: '' // 可选值：'ascending' | 'descending' | ''
  }
}

2. 监听表格的排序事件 #

给el-table绑定sort-change事件，把Element Plus返回的排序信息同步到状态变量中：

<el-table 
  :columns="columns"
  :data="pagedTableData"
  :key="tableKey"
  style="width: 100%"
  id="elTable"
  @sort-change="handleSortChange"> <!-- 新增事件绑定 -->
</el-table>

在methods中实现事件处理函数：

methods: {
  handleSortChange({ prop, order }) {
    this.sortProp = prop
    this.sortOrder = order
    // 排序后默认回到第一页（可根据业务需求调整）
    this.page = 1
    // 更新tableKey强制表格重新渲染（可选）
    this.tableKey += 1
  }
}

3. 修改分页计算属性，先排序再分页 #

更新pagedTableData计算属性，先对全量tableData执行排序，再进行分页切割：

pagedTableData() {
  let sortedData = [...this.tableData] // 拷贝原数据，避免修改源数据

  // 存在排序规则时执行排序
  if (this.sortProp && this.sortOrder) {
    sortedData.sort((a, b) => {
      const valA = a[this.sortProp]
      const valB = b[this.sortProp]

      // 数字类型比较逻辑
      if (!isNaN(valA) && !isNaN(valB)) {
        return this.sortOrder === 'ascending' ? valA - valB : valB - valA
      }
      // 字符串/中文比较逻辑
      return this.sortOrder === 'ascending' 
        ? String(valA).localeCompare(String(valB)) 
        : String(valB).localeCompare(String(valA))
    })
  }

  // 执行分页切割
  const startIndex = (this.page - 1) * this.pageSize
  const endIndex = startIndex + this.pageSize
  return sortedData.slice(startIndex, endIndex)
}

额外说明 #

• 上述排序函数覆盖了数字、字符串（含中文）的常见场景，你可以根据业务数据类型调整比较逻辑。
• 如果数据量较大，建议把排序参数传给后端，由后端返回排序后的分页数据，性能会更优。

内容的提问来源于stack exchange，提问作者Yoo SungHee