一招解决element-ui table+分页插件索引只在当前页面排序的问题

前端

2024-02-21 11:18:36

在使用 element-ui 的 Table 组件和分页插件时，你可能会遇到一个常见的问题：点击表头排序后，排序效果仅限于当前页面，翻页后排序失效，索引也回到了初始状态。这无疑会影响用户体验，让数据浏览变得混乱。

出现这个问题的原因在于，element-ui 的分页插件默认情况下只会对当前页面的数据进行排序。当你切换到其他页面时，实际上是加载了新的数据，而这些数据并没有经过排序处理，自然也就恢复了默认的顺序。

那么，如何解决这个问题，让排序效果应用于所有页面呢？我们可以通过以下两种方法来实现：

方法一：后端排序

最彻底的解决方案是将排序逻辑放在后端处理。前端只需要将排序字段和排序方式传递给后端接口，后端根据这些参数对数据库中的数据进行排序，并将排序后的结果返回给前端。

这种方法的优点在于：

排序效率更高，尤其是当数据量较大时，后端数据库的排序速度远快于前端 JavaScript 的排序速度。
可以避免前端数据量过大导致的性能问题。
可以实现更复杂的排序逻辑，例如多字段排序。

例如，我们可以修改后端接口，使其接受 sortField 和 sortOrder 两个参数，分别表示排序字段和排序方式。前端在触发排序事件时，将这两个参数传递给后端接口，后端根据参数进行排序，并将排序后的数据返回给前端。

方法二：前端排序 + 数据缓存

如果后端接口无法修改，或者数据量较小，我们也可以选择在前端进行排序，并使用数据缓存来保存排序状态。

具体步骤如下：

在 data 中定义一个变量 allTableData，用于存储所有页面的数据。
在初始化时，将所有页面的数据都加载到 allTableData 中。
在 handleSortChange 方法中，对 allTableData 进行排序。
在 current-change 事件中，根据当前页码从 allTableData 中截取对应的数据，并赋值给 tableData。

data() {
  return {
    allTableData: [], // 存储所有页面的数据
    tableData: [], // 当前页面的数据
    currentPage: 1,
    pageSize: 10,
    total: 0,
    sortField: '',
    sortOrder: ''
  };
},
mounted() {
  this.loadAllData();
},
methods: {
  loadAllData() {
    // 通过接口获取所有页面的数据
    // ...
    this.allTableData = data; 
    this.total = data.length;
    this.handleCurrentChange(1); // 初始化页面数据
  },
  handleSortChange({ column, prop, order }) {
    this.sortField = prop;
    this.sortOrder = order;
    this.sortData();
    this.handleCurrentChange(this.currentPage); // 重新加载当前页面数据
  },
  sortData() {
    this.allTableData.sort((a, b) => {
      const valueA = a[this.sortField];
      const valueB = b[this.sortField];
      if (this.sortOrder === 'ascending') {
        return valueA - valueB;
      } else {
        return valueB - valueA;
      }
    });
  },
  handleCurrentChange(val) {
    this.currentPage = val;
    const start = (val - 1) * this.pageSize;
    const end = start + this.pageSize;
    this.tableData = this.allTableData.slice(start, end);
  }
}