tabs切换数据---多个tab页面使用一个data存储数据显示到el-table上,响应慢的请求数据覆盖掉响应快的数据

当tabs切换时,tab1先请求数据但响应慢,此时切换到tab2时,tab2页面请求数据回来后,tab1才响应成功,导致tab2中的数据被tab1的数据覆盖
解决方案
1、当只有两个tab页面我们可以使用数组tableData1和tableData2存储响应结果,el-table中的data使用三元表达式绑定
:data=“index === 0 ? tableData : tableData2”
2、当点击tab时可以将前面的请求cancel掉,使用axios中的方法:axios.CancelToken.source()方法会创建一个令牌,为每个tab请求添加入参{cancelToken:axios.CancelToken.source().token},每次点击按钮发送请求前,将存在令牌的请求cancel掉(this.cancelToken.cancel(“请求已取消”)😉 配置:https://www.cnblogs.com/naturl/p/16621222.html

3、计算属性
(1)computed: {
dataFn() {
//第三种方法
return function (index) {
return this.objData[index.toString()];
};
}
}
(2)
(3)this.$set(this.objData, index, ‘请求的结果’);//为存储结果的对象设置响应式属性
index为点击tab时的标识