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);
				}
			}

效果显示

原始效果

实现效果

弊端

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