Element ui tabs组件左右箭头切换 (第一项为固定项)_el-tab-pane 左右

之前发布过一篇关于切换的 但是有点瑕疵 这次补充一下

<template>
    <div style="margin: 10px 10px; border: 1px solid rgb(212, 209, 209); border-radius: 10px; overflow: hidden; box-shadow: 0px 0px 12px -6px;">
                    <!-- 导航栏 -->
 
     <div class="TAb">
//这个v-if是渲染的条数少于几条的话左右箭头不展示 没有需求可不加
        <div class="xiangzuo" @click="leftChange()" v-if="changePage">
          <!-- 左箭头 -->
          <i class="el-icon-arrow-left"></i>
        </div>
 
        <el-tabs class="TAB" v-model="activeIndex" @tab-click="handleClick" scrollable="true">
          <!-- 固定项 -->
          <el-tab-pane v-if="showFixedTab" label="地名信息" name="fixed">
            <!-- 固定项内容 -->
  <!-- //在这加了一个判断 如果渲染的数据没有值的话就不展示这一行 -->
                        <div class="text-container" v-if="item.valueName != '' && item.valueName != null " v-for="(item,index) in infoData" :key="index">
                            <span  class="first">{{ index}}: </span>   <span class="text">{{ item.valueName }}</span>
                        </div>
            <!-- ... -->
          </el-tab-pane>
 
          <!-- 其他项 -->
          <el-tab-pane v-for="(item, index) in tabsList" :key="index" :label="item.label" :name="index.toString()" style="padding: 0px 10px;">
            <!-- 定义不同的切换列表样式 -->
            <span v-html="item.name"></span>
            <!-- <slot :name="item.key" :index="index" /> -->
          </el-tab-pane>
        </el-tabs>
 
        <div class="xiangyou" @click="rightChange()" v-if="changePage">
          <!-- 右箭头 -->
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>

data里没啥可看的 就是要渲染的数据定义

  data() {
        return {
//默认选中的项
            activeIndex: "",
            tabsList: [],
            // 测试数据
            // testMock: [
            //     {label:'暂无数据',name:'暂无数据'},
            //     {label:'暂无数据',name:'暂无数据'},
            //     {label:'暂无数据',name:'暂无数据'},
            // ],
            //  activeTab: this.defaultActiveTab
            // 切换页显示与隐藏
            changePage: true,
            showFixedTab:true
        };
    },

在生命周期里刚开始的时候判断了一下 看是否添加固定项 因为我这个是组件

   created() {
         this.activeIndex = this.showFixedTab ? 'fixed' : '0';
    },

这个是判断条数低于几条的时候不展示左右箭头 有需求的话看是开局就添加还是监测到数据了在触发方法都一样

      if (this.tabsList != null && this.tabsList.length < 3) {
                this.changePage = false
            } else if (this.tabsList != null && this.tabsList.length > 3) {
                this.changePage = true
            } else {
                this.changePage = false
            }

最后就是方法

leftChange() {
            const currentIndex = parseInt(this.activeIndex);
            if (currentIndex > 0) {
                this.activeIndex = (currentIndex - 1).toString();
            } else if (currentIndex === 0 && this.showFixedTab) {
                this.activeIndex = 'fixed';
            }
        },
        rightChange() {
//因为我是将他的下标当默认选中的数据为依据的所以转化为数值型
            const currentIndex = parseInt(this.activeIndex);
            const lastIndex = this.tabsList.length - 1;
            if (currentIndex < lastIndex) {
                this.activeIndex = (currentIndex + 1).toString();
//如果选中的数据为最大值了 切换到fixed项
            } else if (currentIndex === lastIndex && this.showFixedTab) {
                this.activeIndex = 'fixed';
//如果为fixed项就切换到数据的0项 
            } else if (this.activeIndex == 'fixed') {
                this.activeIndex = '0';
            }
        },
        handleClick(tab) {
            if (tab.name !== 'fixed') {
                this.activeIndex = tab.name;
            }

兄弟们看需求改改吧