layui选项卡不重复增加删除避免冲突的简单方法，超实用-----网上的那些都是些啥，一个比一个复杂，啥也不是！

本来想偷个懒，网上搜搜吧，然而，都是复制粘贴的内容，根本没有考虑实际场景和性能问题，冗长的代码、负责的逻辑，别说人了，就是机器都要费时间参与计算，最后导致卡卡卡。。。。

哎，不说了，网上那些都啥也不是……

开始上代码了：

一、思路就是：将第一个固定，不参与选项卡计算，之后就好说了

  

   

    

     

    
    

     
 
      <div class="layui-tab" lay-filter="demo" lay-unauto lay-allowclose="true">
     
    
   

    

     

    
    

     
  
      <ul class="layui-tab-title">
     
    
   

    

     

    
    

     
    
      <li lay-id="indexsadmin" lay-attr="indexsadmin" class="">
      <i class="layui-icon layui-icon-home">
      </i>
     
    
   

    

     

    
    

     
    
      <i class="layui-icon layui-unselect layui-tab-close" style="display:none">ဆ
      </i>
     
    
   

    

     

    
    

     
    
      </li>
     
    
   

    

     

    
    

     
  
      </ul>
     
    
   

    

     

    
    

     
  
      <div class="layui-tab-content">
     
    
   

    

     

    
    

     
    
      <div class="layui-tab-item layui-show">
      <iframe src="admin/indexs.html">
      </iframe>
      </div>
     
    
   

    

     

    
    

     
  
      </div>
     
    
   

    

     

    
    

     

      </div>
     
    
  

二、简洁明了，写代码思路很重要。

  

   

    

     

    
    

     

      var $ = layui.jquery,element = layui.element; 
      //Tab的切换功能，切换事件监听等，需要依赖element模块
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
      var 
      array = 
      new 
      Array();
      //选项卡数组
     
    
   

    

     

    
    

     
  
      function openadmin(content,id,title){      
     
    
   

    

     

    
    

     
      
      var ins = 
      array.indexOf(id);     
      // 0
     
    
   

    

     

    
    

     
      
      if(ins!=
      '-1'){
     
    
   

    

     

    
    

     
        
      // element.tabChange('demo', id);//不推荐在if里面进行跳转选项卡
     
    
   

    

     

    
    

     
          
     
    
   

    

     

    
    

     

            } 
      else{
     
    
   

    

     

    
    

     
           
      //新增一个Tab项
     
    
   

    

     

    
    

     

            element.tabAdd(
      'demo', {
     
    
   

    

     

    
    

     

              title: title
     
    
   

    

     

    
    

     

              ,content: 
      '<iframe src="'+
      "/admin"+content+
      '"></iframe>'
     
    
   

    

     

    
    

     

              ,id: id
     
    
   

    

     

    
    

     

            })
     
    
   

    

     

    
    

     

          uparr(id,
      1,
      0);
     
    
   

    

     

    
    

     
          
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

            element.tabChange(
      'demo', id);       
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  
      //选项卡新建
     
    
   

    

     

    
    

     

        element.on(
      'tab(demo)', 
      function(data){
     
    
   

    

     

    
    

     

            console.log($(this).attr(
      'lay-id'))
     
    
   

    

     

    
    

     

        });
     
    
   

    

     

    
    

     
    
     
    
   

    

     

    
    

     
    
      //选项卡删除
     
    
   

    

     

    
    

     

          element.on(
      'tabDelete(demo)', 
      function(data){
     
    
   

    

     

    
    

     

            uparr(this.getAttribute(
      "lay-id"),
      2,data.index);
     
    
   

    

     

    
    

     

            console.log(data.elem); 
      //得到当前的Tab大容器
     
    
   

    

     

    
    

     

          });
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
      function uparr(data,is,index){
     
    
   

    

     

    
    

     
        
      //2=删除
     
    
   

    

     

    
    

     
        
      if(is==
      2){
     
    
   

    

     

    
    

     
            
      array.splice(index
      -1,
      1)
     
    
   

    

     

    
    

     

              }
      else 
      if(is==
      1){
     
    
   

    

     

    
    

     
            
      //1=增加
     
    
   

    

     

    
    

     
            
      var ins = 
      array.indexOf(data);     
      // 0
     
    
   

    

     

    
    

     
            
      if(ins==
      '-1'){
     
    
   

    

     

    
    

     
                 
      array.push(data)
     
    
   

    

     

    
    

     

                  }           
     
    
   

    

     

    
    

     
            
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     
        
     
    
   

    

     

    
    

     

          }
     
    
  

三、由于删除回调只会传下表，并不会传id，所以还是要根据下标来判断，幸亏下标是动态的。

四、对了补充下，js中如果你是用的模块单独加载的，就用单独加载的方法引入element，如果是全局的就用全局的方法引入，文中的是全局方法，生产环境推荐全局加载方式，如果是调试环境推荐单独加载方式（可以定位具体的错误内容和信息）。

五、本来想设置付费的，毕竟全网独此一份，高效、快捷，很有实战性，不过考虑到网上都是一些水文，还是公开吧，我为人人，人人为我的精神还是要发扬的！

注：看了记得点个赞