VUE-解决切换tab 标签时,不重复调用后端的问题
界面结构如下:解决方法:1、切换Tab标签时,先判断当期项是否有数据,有数据则不请求后端,否者请求后端data(){return{loadFlag:[false,false,false],}}// 防止多次调用后端,需要在切换tab的时候判断当前页面是否有值,有值不再加载;没值,加载tabSelect(val) {t...
·
界面结构如下:
解决方法:
1、切换Tab标签时,先判断当期项是否有数据,有数据则不请求后端,否者请求后端
data(){
return{
loadFlag:[false,false,false],
}
}
// 防止多次调用后端,需要在切换tab的时候判断当前页面是否有值,有值不再加载;没值,加载
tabSelect(val) {
this.selected = val;
if (val === 0) {
this.isAddress=true
this.isExpert=false
this.isMaterial=false
if(this.loadFlag[0]){//有数据,不加载
return
}else{//没有数据,加载
this.getListAddress();
}
} else if (val === 1) {
this.isAddress=false
this.isExpert=true
this.isMaterial=false
if(this.loadFlag[1]){//有数据,不加载
return
}else{
this.getListExpert()
}
} else if (val === 2) {
this.isAddress=false
this.isExpert=false
this.isMaterial=true
if(this.loadFlag[2]){//有数据,不加载
return
}else{
this.getListMaterial()
}
}
},
getListAddress(){
axios({
//后端路径
}).then(()=>{
//数据处理
this.loadFlag[0]=true
}).catch(err=>{
errStr("获取数据失败!")
this.loadFlag[0]=false
})
},
getListExpert(){
axios({
//后端路径
}).then(()=>{
//数据处理
this.loadFlag[1]=true
}).catch(err=>{
errStr("获取数据失败!")
this.loadFlag[1]=false
})
},
getListMaterial(){
axios({
//后端路径
}).then(()=>{
//数据处理
this.loadFlag[2]=true
}).catch(err=>{
errStr("获取数据失败!")
this.loadFlag[2]=false
})
}
2、初始化的时候,只给第一个标签的值
created() {
this.tabSelect(0)
},
更多推荐
已为社区贡献32条内容
所有评论(0)