elementUi——tabs标签页频繁点击导致页面加载出现错位问题

╰半夏微凉° 2022-10-05 00:40 1119阅读 0赞

之前在写页面的时候，用到了`elementUi`中的`tabs`标签页的组件：  
效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
测试人员在进行这方面测试时，通过快速的频繁点击，就会出现下方的列表数据与选中的标签页不符的情况：

看到这个问题，我第一时间想到的是加个防抖，或者叫节流，我一直都有点分不清……  
具体思路就是：在下方数据加载完之前不允许`tabs`标签页进行切换

`tabs`标签页组件如下：  
![as][]  
查看官方文档后，发现有个钩子函数：切换标签之前的钩子函数，我觉得可以在这个函数中加个延迟，一定时间后再切换标签，就可以实现想要的功能了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
对应的代码如下：

<el-tabs v-model="activeName" v-on:tab-click="handleClick" :before-leave="beforeTabClick">
        <el-tab-pane :label="'全部样品单" name="first"></el-tab-pane>
        <el-tab-pane :label="'待审核" name="10"></el-tab-pane>
    </el-tabs>

函数部分代码：

data(){ 
    	return{ 
    		timer:null
    	}
    },
    methods:{ 
    	beforeTabClick(newName,oldName){ 
    		console.log("切换tabs之前的钩子函数");
    		if(this.timer){ 
    			return false;
    		}else{ 
    			return true;
    		}
    	},
    	handleClick(){ 
    		this.getList();
    	},
    	getList(){ 
    		//调取列表数据接口 
    		//接口调用成功后，清空定时器
    		...
    		clearTimeout(this.timer);
    		...
    	}
    }

上面的代码看上去没啥问题，但是我在使用过程中，发现`beforeTabClick`函数中的`consoel.log(切换tabs之前的钩子函数);`并没有每次都打印，也就是说会有切换`tabs`标签之前失效的情况。

具体原因我也不知道为什么，有知道的大神可以留下您的答案。

接着看官方文档，看到有个属性：  
因此想到一个办法，就是在调用接口的过程中，将所有的标签设为禁用状态，然后接口调用成功后，再让标签可点击，这样就可以实现防止`tabs`标签的频繁点击的问题了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
具体代码如下：

<el-tabs v-model="activeName" v-on:tab-click="handleClick">
        <el-tab-pane :label="'全部样品单'" name="first" :disabled="currentName?false:true"></el-tab-pane>
        <el-tab-pane :label="'待审核'" name="10" :disabled="currentName?false:true"></el-tab-pane>
    </el-tabs>

函数部分的代码：

data(){ 
    	return { 
    		currentName:true
    	}
    },
    methods:{ 
    	handleClick(n) { 
          this.currentName = false;
          this.getList();
        },
        getList(){ 
    		//调取列表数据接口 
    		//接口调用成功后，清空定时器
    		...
    		setTimeout(()=>{ 
    			this.currentName = true;//此处加延时，是为了给页面渲染的时间，不给也是可以的，因为我这边的数据很少
    		},200)
    		...
    	}
    }

完成！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221005/00fdad73c5214bf688f68d727246ad3f.png
[as]: /images/20221005/cbc55bf9f8384ae2b8c6857948cd09d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221005/91c59b7a02fb448c9a1f49e9cc0829c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221005/ac66c2f71f2f4bdea8bd9c4f415b6f96.png