iview tabs 顶部导航栏和模块切换栏的示例代码

1.顶部导航栏:

html:

 

      
          
              

  0000000000
  
  
    上�髑��
  
  
  
  

      
    
    

        
          {{ExportToExcel}}
      
  
  
  
    

   45646468465
      
      
  

css:

.ivu-tabs-nav{
 float: right;
}
.ivu-tabs .ivu-tabs-bar {
 border-width: 0;
}

运行结果:

2.模块浏览:

HTML:

    
{{duanluo}}
      

        

            
              
                

                   
                  
                
                

                
              
              
                  

                 
                
                
                

                  
              
              
                  

                   
                  
                  
                  

                    
              

js:

各个模块的数量显示:

 Main: {
    data() {
     return {
      lab1: h => {
        return h("div", [
         h("span", "全部人力"),
         h("Badge", {
          props: {
           count: this.length1,
          }
         })
        ]);
       },
       lab2: h => {
        return h("div", [
         h("span", "��班��到"),
         h("Badge", {
          props: {
           count: this.length2,
          }
         })
        ]);
       },
       lab3: h => {
        return h("div", [
         h("span", "DL1"),
         h("Badge", {
          props: {
           count: this.length3,
          }
         })
        ]);
       },
       length1:"",
       length2:"",
       length3:"",

运行结果:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。