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

      <!-- 导航栏 -->
                <div class="TAb">
                    <div class="xiangzuo" @click="leftChange()">
                        <!-- 左箭头 -->
                        <i class="el-icon-arrow-left"></i>
                    </div>
 
                <el-tabs class="TAB" v-model="activeIndex" @tab-click="handleClick" 
                      scrollable="true" >
                    <el-tab-pane v-for="(item, index) in data" :key="item.id" 
                          :label="item.label" :name="index.toString()">
                        <!-- 定义不同的切换列表样式  切换不同样式使用的插槽(没这需求可不写)-->
                         <slot :name="item.label" :index="item.id" />
                    </el-tab-pane>
                </el-tabs>
 
                    <div class="xiangyou" @click="rightChange()">
                        <!-- 右箭头 -->
                        <i class="el-icon-arrow-right"></i>
                    </div>
            </div>
 
 
//xiangzuo , xiangyou 是左右箭头 定位到tab栏左右两侧

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

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组件   
   <!-- 导航栏 -->
                <div class="TAb">
                    <div class="xiangzuo" @click="leftChange()">
                        <!-- 左箭头 -->
                        <i class="el-icon-arrow-left"></i>
                    </div>
 
                <el-tabs class="TAB" v-model="activeIndex" @tab-click="handleClick"                                         
                         scrollable="true" >
                                      //data 父组件传递过来的数据
                    <el-tab-pane v-for="(item, index) in data" :key="item.id" 
                           :label="item.label" :name="index.toString()">
                        <!-- 定义不同的切换列表样式 -->
                         <slot :name="item.label" :index="item.id" />
                    </el-tab-pane>
                </el-tabs>
 
                    <div class="xiangyou" @click="rightChange()">
                        <!-- 右箭头 -->
                        <i class="el-icon-arrow-right"></i>
                    </div>
            </div>
 
 
 
//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';

 <Tabs :data="activeList" :defaultActiveTab="'tab1'" class="tabs">
                        //#绑定的具名插槽的名字
               <template #地名信息>
                  <div class="info">
                    <div  v-for="item in  listTitle" :key="item.id">
                          <div class="text-container">
                            <span class="first">{{ item.title }}:  </span> <span 
                               class="text">这里是文本内容，当文本内容过长时会自动换行，而不会 
                               影响到布局。</span>
                          </div>
                    </div>
                </div>
              </template>
              <template #配置管理>
                <div class="tab-content-2">标签页2的内容</div>
              </template>
              <template #商品管理>
                <div class="tab-content-3">标签页3的内容</div>
              </template>
              <template #库存管理>
                <div class="tab-content-3">标签页4的内容</div>
              </template>
</Tabs>

//贴上数据格式

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

//附上效果图

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

最新修改的