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

运行结果: