一 , Element-UI tabs标签实现点击左右箭头 实现左右tab栏按个选中切换(正常是只会切换到后面空白tab栏 不会选中) .........二 , 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" ><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'},],

//附上效果图

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

最新修改的