使用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>
相关推荐
huihuihuanhuan.xin几秒前
前端八股-promise
前端·javascript
星语卿22 分钟前
浏览器重绘与重排
前端·浏览器
小小小小宇37 分钟前
前端实现合并两个已排序链表
前端
yngsqq1 小时前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk1 小时前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan1 小时前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE1 小时前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年1 小时前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能1 小时前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房1 小时前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端