【前端学习记录】关于使用el-table排序时，默认排序多请求一次的问题

前言

element组件库经常会被使用到，el-table可以通过配置实现表格的排序。最近在写代码时遇到了个坑，记录如下

问题现象

先上代码

<el-table
        border
        ref="tableObj"
        class="w-100"
        :data="tableData"
        v-loading="isLoading"
        :default-sort="{prop: 'age', order: 'descending'}"
        :primaryKey="'id'"
        @sort-change="sortChange"
      >
        <el-table-column
          width="130"
          sortable="custom"
          prop="age"
          label="年龄"
          show-overflow-tooltip>
        </el-table-column>
</el-table>

// 使用的是vue2, 只摘了部分代码
sortChange(sort) {
    this.getTableData();
},

在代码中我设置了排序的方法sortChange，并设置了默认排序，当用户点击表格排序时，会触发排序方法，并重新发送请求，获取接口数据。

令人无奈的是，每次离开页面时就会多发一次请求, 该请求对用户来说，看起来没有什么影响，但是由于其请求参数的特殊性，导致在切换至部分页面时，多发的这个请求会报错。为了解决多发一次请求的问题，进行了如下的尝试。

尝试

经过定位，发现多发的这次请求，来自于sortChange，根据网上的解决方案，将默认排序即default-sort去掉即可解决该问题。具体的原理大家可以去看element的源码实现。

但是在测试时，发现如果用户手动选上按某个字段进行排序时，再离开页面仍然会请求两次。这表明上述解决方法不能从根本上解决问题。

于是考虑页面的生命周期，经过打印日志发现，离开页面时会先执行beforeDestroy，再执行sortChange，有了思路就好说了。

最终方案

部分代码如下：

export default {
 data() {
 	tableData: [],
 	isLoading: false,
 	pageDestroy: false,
 },
 beforeDestroy() {
 	this.pageDestroy = true;
 },
 methods: {
	sortChange(sort) {
		if (this.pageDestroyed) return;
	    this.getTableData();
	},
 }
}