前言
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();
},
}
}