el-tabs(标签栏)的入门学习

el-tabs(标签栏)的入门学习
适用场景
与导航栏相似，项目中常见的是点击某个导航栏，主页面（el-main）模块的最上方会显示我们的标签栏集合，点击不同的导航栏，标签栏会在不断追加，若点击到标签集合中已存在，就进入选中指定的标签栏，显示页面

知识点

1. el-tabs嵌套el-tab-pane使用
2. el-tabs的v-model对应el-tab-pane的name
3. el-tabs的type可以指定为card,border-card
4. el-tab-pane的label为显示的标签内容，标签的内容在首尾标签内部
5. el-tabs可以设置closable,editable,addable,分别设置tab-remove,edit,tab-add动态修改标签集合
6. 还有tab-click钩子
7. el-tabs中设置tab-position，修改标签位置，可以为top,bottom,left,right

效果图

代码 

    
    
    
    
    
    



    

        
            {{tab.content}}
            
        
        
            {{tab.content}}
            
        
        
            {{tab.content}}
            
        
        
            top
            bottom
            left
            right
        
        
            
                
                {{tab.content}}
            
        
    

官网

el-tabs的入门学习