EasyUI tabs的显示和隐藏

╰半夏微凉° 2021-09-01 05:51 592阅读 0赞

### EasyUI tabs的显示和隐藏 ###

*   *  前言
     *  代码实现
     *  效果显示
     *  弊端

## 前言 ##

本节记录的是EasyUI的layout布局中的tabs属性实现单独一个标签的显示和隐藏  
在实际开发中只需要根据条件的不同实现不同的效果。

## 代码实现 ##

$.ajax({
    	type:"post",
    	async:true,
    	 url:"/dataacquisition/bizreportloft/bizReportLoftList",//请求路径
    	 dataType:"json",//返回数据形式为json
    	 success:function(result){
    		 if("现场技术员" != result.roleName){
    			var ttb = $("#reportloft-tabs").tabs("tabs");
    			for (var i = 0; i < ttb.length; i++) {
    				var opts = ttb[i].panel('options');
    				 if(opts.title == "任务新增"){
    					 var tab = $('#reportloft-tabs').tabs('getSelected');
    					 var index = $('#reportloft-tabs').tabs('getTabIndex', tab);
    					 $('#reportloft-tabs').tabs('close', index);
    				}
    			}
    		 }
    	 }
    });

主要实现代码

var ttb = $("#reportloft-tabs").tabs("tabs");
    			for (var i = 0; i < ttb.length; i++) {
    				var opts = ttb[i].panel('options');
    				 if(opts.title == "任务新增"){
    					 var tab = $('#reportloft-tabs').tabs('getSelected');
    					 var index = $('#reportloft-tabs').tabs('getTabIndex', tab);
    					 $('#reportloft-tabs').tabs('close', index);
    				}
    			}

## 效果显示 ##

原始效果  
![在这里插入图片描述][20200422161908660.jpg_pic_center]

实现效果  
![在这里插入图片描述][20200422161953731.jpg_pic_center]

## 弊端 ##

这段代码实现了上述的效果，但是在页面加载运行时，被隐藏的标签会先加载出来，然后根据条件隐藏（也就是说任务新增会在加载的当前页面闪一下），如果有更好的方案，可以在评论区留言

[20200422161908660.jpg_pic_center]: /images/20210901/bf9a74ac709c4432996e2ba7e0b7a201.png
[20200422161953731.jpg_pic_center]: /images/20210901/5628c7beed0145f0856920b24bd25d47.png