使用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不生效的问题?
304 3
|
6月前
|
JavaScript 前端开发 开发者
button 元素的 disabled 属性用法
button 元素的 disabled 属性用法
|
6月前
关于解决el-select组件自动清除数据空格的问题
关于解决el-select组件自动清除数据空格的问题
196 1
|
6月前
Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位
Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位
2643 1
|
6月前
|
JavaScript 前端开发 开发者
div 元素的 tab-index 属性被设置为 -1,意味着什么
div 元素的 tab-index 属性被设置为 -1,意味着什么
|
11月前
|
前端开发
input去掉输入框type为number时的上下箭头的实现方法
input去掉输入框type为number时的上下箭头的实现方法
78 0
|
12月前
el-input-number阻止外层button的冒泡
el-input-number阻止外层button的冒泡
136 0
|
12月前
Element-UI中el-input输入值不显示
Element-UI中el-input输入值不显示
356 0
|
JavaScript
el-select下拉多选框 el-select 设置默认值不可删除功能
Element-UI是一款广泛使用的Vue.js组件库,其中El-Select下拉多选框组件在实际项目开发中经常被使用。然而,在Element 3.0版本中,El-Select下拉多选框默认值可被删除,这可能会导致一些意外情况。本文将介绍如何解决这个问题,实现El-Select下拉多选框设置默认值不可删除的功能。
640 0
el-select下拉多选框 el-select 设置默认值不可删除功能