使用el-tab,el-tab-pane循环使用循环后不显示下划线问题

在vue项目中使用element-UI el-tab里的el-tab-pane是循环出来的,但是循环出来后选中tab不显示下划线了

文章目录

问题

问题展示效果

问题代码

bash 复制代码
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="item in model_creation_list" :label="item.abbreviation" :name="item.id ">{{ item.name }}</el-tab-pane>
        </el-tabs>

问题原因

el-tabs__active-bar is-top 元素宽度为0

解决方案

解决后效果

解决方案1代码

在方法里设置固定宽度

bash 复制代码
 _this.$nextTick(_ => {
          const activeBarElement = document.getElementsByClassName('el-tabs__active-bar')[0]
          activeBarElement.style.width = '104px';
        })

解决方案2代码

给name添加一个空字符串

bash 复制代码
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="item in model_creation_list" :label="item.abbreviation" :name="item.id + ''">{{ item.name }}</el-tab-pane>
        </el-tabs>
相关推荐
忧郁的蛋~20 分钟前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中21 分钟前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我41 分钟前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing43 分钟前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心1 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟1 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟1 小时前
用Sass循环实现炫彩文字跑马灯效果
前端
code_YuJun1 小时前
Promise 基础使用
前端·javascript·promise
Codebee1 小时前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
GIS之路1 小时前
GIS 空间关系:九交模型
前端