使用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>
相关推荐
golang学习记2 分钟前
从0死磕全栈之在 Next.js 中使用 Sass
前端
好大的月亮7 分钟前
oss中的文件替换后chrome依旧下载到缓存文件概述
前端·chrome·缓存
Broken Arrows14 分钟前
解决Jenkins在构建前端任务时报错error minimatch@10.0.3:……的记录
运维·前端·jenkins
明月与玄武16 分钟前
JS 自定义事件:从 CustomEvent 到 dispatchEvent!
前端·javascript·vue.js
Zhencode19 分钟前
vue之异步更新队列
前端·javascript·vue.js
九年义务漏网鲨鱼30 分钟前
从零学习 Agentic RL(四)—— 超越 ReAct 的线性束缚:深入解析 Tree-of-Thoughts (ToT)
前端·学习·react.js
Jay丶32 分钟前
Next.js 与 SEO:让搜索引擎爱上你的网站 💘
前端·javascript·react.js
狗头大军之江苏分军36 分钟前
请不要在感情里丢掉你的“我”
前端·后端
路光.1 小时前
一.React相关面试真题
前端·react.js·前端框架
玉宇夕落1 小时前
🌌用CSS3打造“星球大战”片头:前端是代码界的导演,让文字在星空中翻滚
前端·javascript