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

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

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


问题

问题展示效果

问题代码

        <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代码

在方法里设置固定宽度

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

解决方案2代码

给name添加一个空字符串

        <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>
目录
相关文章
|
5月前
|
JavaScript
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题?
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题?
343 3
|
3月前
|
JavaScript
成功 解决 @keyup.enter=“search()“ 在el-input 组件中不生效的问题
这篇文章讨论了在Vue 3中使用Element UI的`el-input`组件时,`@keyup.enter="search()"`事件绑定不生效的问题,并提供了通过使用`.native`修饰符来解决这个问题的方法。
成功 解决 @keyup.enter=“search()“ 在el-input 组件中不生效的问题
|
4月前
|
Python
El Farol Bar 问题解释
El Farol Bar 问题解释
|
6月前
关于解决el-select组件自动清除数据空格的问题
关于解决el-select组件自动清除数据空格的问题
205 1
|
6月前
简单粗暴实现el-input只允许输入数字
简单粗暴实现el-input只允许输入数字
简单粗暴实现el-input只允许输入数字
|
11月前
|
前端开发
input去掉输入框type为number时的上下箭头的实现方法
input去掉输入框type为number时的上下箭头的实现方法
85 0
Element-UI中el-input输入值不显示
Element-UI中el-input输入值不显示
385 0
el-input输入值无法在输入框显示
el-input输入值无法在输入框显示
100 0
Notepad++ 设置tab为N个空格
Notepad++ 设置tab为N个空格
120 1
|
前端开发
el-table 在第一行添加合计行和操作按钮
el-table 在第一行添加合计行和操作按钮
164 0