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:"",

运行结果:

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