Element ui tabs组件左右箭头切换 (第一项为固定项)-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element ui tabs组件左右箭头切换 (第一项为固定项)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

<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;
            }

兄弟们看需求改改吧文章来源地址https://www.toymoban.com/news/detail-789614.html

到了这里，关于Element ui tabs组件左右箭头切换 (第一项为固定项)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！