解决vue elementUI el-tabs默认选项下划线不显示的问题

el-tabs初始加载时,el-tabs__active-bar的宽度为0,导致下划线不显示问题

首先在el-tabs组件中加入v-if=“ifShow”,  默认值为false  请求tabList数据接口时给添加为true

复制代码
 <el-tabs
          v-if="ifShow"
          v-model="authType"
          size="small"
          class="tab-first"
          @tab-click="categoryTabChange"
        >
          <el-tab-pane
            v-for="item in tabList"
            :key="item.id"
            :label="item.name"
            :name="item.id"
          >
          </el-tab-pane>
        </el-tabs>
复制代码
复制代码
    async getUserDomainList() {
      try {
        this.baseLoading = true;
        const { code, data } = await aaaaaaaa({//接口
          userCode: this.$route.query.userCode
        });
        if (code === 200) {
          this.ifShow = true// 优化页面首次刷新底部没有竖条情况
          this.domainList= data 
        }
      } catch (error) {
        return false;
      } finally {
        this.baseLoading = false;
      }
    },
复制代码

 

posted @   bingxiaoxiao  阅读(683)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示