一 , Element-UI tabs标签实现点击左右箭头 实现左右tab栏按个选中切换(正常是只会切换到后面空白tab栏 不会选中) .........二 , tabs标签切换不同的模板样式

      
                

                    

                        
                        
                    

                
                    
                        
                         
                    
                

                    

                        
                        
                    
            


//xiangzuo , xiangyou 是左右箭头 定位到tab栏左右两侧

value / v-model

绑定值，选中选项卡的 name

定义导航索引值 以及虚拟数据

data(){
    return(){
             activeIndex: "0",
             // 导航列表
            data: [
                {
                    id: 0,
                    label: '熊大',
                    name:'one'
                },
                {
                    id: 1,
                    label: '熊二',
                    name:'two'
                },
                {
                    id:2,
                    label: '光头强',
                    name:'there'
                },
                {
                    id: 3,
                    label: '李老板',
                    name:'four'
                },
            ],
    }
}

使用左右箭头方法

    methods: {
         // 导航栏左右箭头切换
        leftChange() {
            let num = Number(this.activeIndex)
            num > 0 && num--
            this.activeIndex = num.toString()
        },
        rightChange() {
            let num = Number(this.activeIndex)
            // this.data.length 数组长度
            num < this.data.length - 1 && num++
            this.activeIndex = num.toString()

        },
    }

到这里就实现左右箭头选中按个切换了

  顺带再拓展一下

二 , tabs标签切换的不同模板样式

需求肯定不会这么简单的 官网给定的模板是切换渲染不同的标题 但在真实场景下每个页面的模板样式肯定不会是一样的 所以我们需要封装组件 以插槽的形式渲染不同的模板样式

//Tabs组件   
   
                

                    

                        
                        
                    

                
                                      //data 父组件传递过来的数据
                    
                        
                         
                    
                

                    

                        
                        
                    
            



//props 接收
  props: {
         data: {
            type: Array,
            default: () => [],
        },
        defaultActiveTab: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            activeIndex: "0",
        };
    }, 


//methods 切换方法
 methods: {
         // 导航栏左右箭头切换
        leftChange() {
            let num = Number(this.activeIndex)
            num > 0 && num--
            this.activeIndex = num.toString()
        },
        rightChange() {
            let num = Number(this.activeIndex)
            num < this.data.length - 1 && num++
            this.activeIndex = num.toString()

        },
        // 切换tab栏方法
        handleClick(tab) {
            this.activeIndex = tab.name
        },
    },

2.在父组件中引用并定义具名插槽名字 

// 引入tab组件
import Tabs from './components/Tabs.vue';

 
                        //#绑定的具名插槽的名字
               
              
              
              

//贴上数据格式

             // 导航列表
        activeList: [
        {
          id: 0,
          label: '地名信息',
          name: 'one'
        },
        {
          id: 1,
          label: '配置管理',
          name: 'two'
        },
        {
          id: 2,
          label: '商品管理',
          name: 'there'
        },
        {
          id: 3,
          label: '库存管理',
          name: 'four'
        },],

//附上效果图

续写: 可能测试的时候也是稍微有点问题 大家可以参考我最新补充的

最新修改的