解决el-tabs默认选项下划线消失问题

最新推荐文章于 2024-09-21 11:05:07 发布

勾勾酱

最新推荐文章于 2024-09-21 11:05:07 发布

阅读量3.7k

点赞数 4

分类专栏： element 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_53247156/article/details/126667608

版权

element 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了一个关于前端开发的问题，即在不点击tabs的情况下，el-tabs__active-bar的宽度为0导致下划线不显示。通过在方法中使用$nextTick并在DOM加载后设置activeBarElement的宽度为104px，成功解决了这个问题。

摘要由CSDN通过智能技术生成

在不点击tabs的情况下加载的组件，el-tabs__active-bar的宽度为0，导致下划线不显示，因此在方法里设置宽度即可

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

勾勾酱

关注关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue3 - Element Plus 标签页 Tabs 去掉底部灰色线条下划线，隐藏 el-tabs / el-tab-pane 选项卡下面一条很长的线条（完美去除 tab 标签页组件下方的灰线条）

王佳斌

08-11

7583

element plus 如何去掉el-tabs标签页下方很长的一条线，vue3 element plus 去掉el-tabs标签页底部黑色线，element-plus标签页下划线去除，去除element plus中tab组件中的下划线，清除vue3 elementplus标签页下划线，element plus去掉tabs选项卡底部黑色线，vue3 el-tabs去掉底部的下划线，el-tab-pane下面有灰色线条怎么清除掉，vue3 element plus如何去除tabs选项卡的灰色下划线，vue3标

element的tab，循环中下划线不显示的问题

漫天随飞雪的博客

02-01

1100

使用elment Tabs 标签页解决循环中 下划线不显示的问题

2 条评论您还未登录，请先登录后发表或查看评论

解决TabLayout 不显示下划线问题

08-24

主要介绍了解决TabLayout 不显示下划线问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

el-tabs中设置el-tab-pane下划线的宽度并且让文字居中

最新发布

F02528的博客

09-21

422

elementPlus组件中，如何去掉默认tabs底部的下划线以及设置el-tab-pane下划线的宽度并且让文字居中，只需添加几行CSS代码样式

解决vue elementUI el-tabs默认选项下划线不显示的问题

u010234868的专栏

05-07

1254

【代码】解决vue elementUI el-tabs默认选项下划线不显示的问题。

解决嵌套的el-tabs默认下划线不显示的问题

m0_48627420的博客

11-02

1325

解决嵌套的el-tabs默认下划线不显示的问题

【学习记录】element-ui嵌套el-tabs切换下划线丢失

m0_66877959的博客

08-18

1745

【学习记录】element-ui嵌套el-tabs切换下划线样式丢失

el tabs组件基础类型无下划线问题

huifeidexiang87的博客

05-13

2951

在el-popover组件中使用el-tabs组件时，首次进入悬浮框时，默认展示的标签下面无下划线，但标签标题的颜色已经变了，这说明v-model绑定成功了。而且点击别的标签时，下方的下划线是正常显示的。这说明在组件初次加载时有问题。查看页面样式，发现变色下划线的width为0，而正常有下划线时应该是28。那么为什么首次进入悬浮框时width是0呢？百度一下这个问题，发现出现这个问题都是因为嵌套使用el-tab组件造成的，解决方法多是重新加载，那么如何重新加载呢？于是抱着试一...

解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

11-20

本文将详细解析如何解决“切换Tab后，el_table的固定列下方多了一条线”的问题，以及如何处理ElementUI Table组件在屏幕尺寸临界时固定列显示不全的常见问题。首先，让我们深入理解这个问题的现象。当用户在应用中...

实现tab标签滑动显示效果 vue组件 transform: translateX

Li_Ning21的博客

03-12

3052

接了公司一个大屏的任务，其中一个tab标签，虽然UI没说需要啥效果，但是我还是想做的好看一点回头视频服务器回复我在上传一下gif版本的；大概思路也是借鉴了这两篇文章；实现tab标签下选中条滑动效果-react组件 element-ui框架源码阅读之tabs标签页大概原理就是：通过mounted 获取整个tabs的高度，作为动态值；在mounted，利用list的forEach，动态获取每个dom的宽度，并将动态条移动的初始位置计算出来将值直接塞给原数组的item，点击click的时候，塞给

PyMuPDF 操作手册 - 01 从PDF中提取文本

岳涛的博客

06-17

715

PyMuPDF Ver 1.24.4 操作手册 - 01 从PDF中提取文本

avue-design-form自定义表单目录说明

weixin_38194239的博客

07-28

3752

项目引入avue-from-design 自定义属性 1、在components中引入全部文件修改了history.js 和custom的文件引入问题 github地址：https://github.com/sscfaith/avue-form-design 2、安装高德地图安装（指定版本）： npm install monaco-editor@0.22.3 使用说明：https://www.yuque.com/zhengrenzhe/blog/yqz7hp 在public中index.html 中

解决 el-tabs 在切换页签时出现的下划线不显示问题

藕粉桂花糖糖糕的博客

05-27

367

解决 el-tabs 在切换页签时出现的下划线不显示问题

keep-alive缓存的页面el-tabs默认选中的下划线不显示

lidianbai的博客

08-08

428

【代码】keep-alive缓存的页面el-tabs默认选中的下划线不显示。

删除el-table最下面一条横线

hahaha921的博客

06-14

1088

删除el-table最下面一条横线

element UI 表格，最后一列底部横线不显示或者底部多出横线

文龙刚的博客

10-12

2371

element UI 表格，最后一列底部横线不显示或者底部多出横线

Element el-tab bug修复

11-29

796

这里写自定义目录标题解决Element el-tab首个tab不显示下划线问题解决Element el-tab首个tab不显示下划线问题 loadData (val) { // 元素渲染完后进行操作 this.$nextTick(_ => { // 获取第一个tab元素 const tabFirstElement = document.getElementById('tab-0') // 获取高亮显示条 const activeBarElement

解决element-ui的tab栏切换样式的问题

ge15139567650的博客

07-07

2756

1.出现如上情况，用element-ui同样也可以实现； 2.实现难度在于，用css画出来的三角可以实现，三十由于父盒子宽度不够，会被默认隐藏，此时我们需要抬高下划线和三角形，如何用伪类让后面的线也抬高；代码如下： ::v-deep.thing-tab{ .is-stretch{ display:flex; min-width:1024px; } .el-tabs__item{ width:20...

el-tabs修改

qq_34179819的博客

08-10

1493

而且el-tabs组件能给到的只有el-tabs和el-tab-pane，直接将:style="{}"动态样式作用在el-tab-pane上又不行。想必也发现了另外一个神奇的事情，原生的el-tabs栏目的宽度是根据字体大小也就是font-size去设置的。此时，在代码中也是根据font-size去设置栏目的宽度，示例中使用4.8去调节，可以修改这个数字去修改栏目的宽度。现有的element的组件库已经能满足大部分项目中的需求，但是当出现一些奇奇怪怪的需求时，我们就需要对element组件进行修改。

element el-tabs 底部的下划线变细

05-23

可以通过修改 `border-bottom-width` 属性来调整 `el-tabs` 底部下划线的粗细。例如，将下划线变为原来的一半粗细，可以在 CSS 中添加以下代码： ```css .el-tabs__header:before { border-bottom-width: 1px; /* 将原来的 2px 改为 1px */ } ``` 如果只想修改某个特定的 `el-tabs` 实例的下划线粗细，可以给该实例添加一个自定义的 class，并在 CSS 中使用该 class 来修改样式。例如： ```html <el-tabs class="my-tabs">  </el-tabs> ``` ```css .my-tabs .el-tabs__header:before { border-bottom-width: 1px; /* 将下划线粗细改为 1px */ } ```