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

已于 2024-02-03 14:46:57 修改
阅读量6.5k 收藏 5
点赞数 5
分类专栏： + Vue3 文章标签： vue3 element plus组件库 el-tabs标签页 el-tab-pane选项卡 去掉底部灰色的下划线 隐藏下面整条灰色线条 去掉tabs选项卡下划线整条
于 2023-08-11 22:35:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/132229156
版权

前言

在 v2版本的 Element ui 中，去掉 tabs 选项下面的下划线很简单，但在 v3 版本 Element Plus 中却无法去掉隐藏。

本文 实现了 Element Plus 组件库中，Tabs 标签页（el-tabs）隐藏底部下方一条 “贯穿” 灰色线条，

去除选项卡 el-tabs / el-tab-pane 组件的长线条，支持局部和全局修改的详细教程。

如下图所示，标签页底部的灰色线条被去除了，其他样式保持不变。

详细示例代码教程，保证去除

在这里插入图片描述 在这里插入图片描述

解决方案

按照如下所示教程，便可完美去除。

要想

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
elementui el-tabs 去掉底部的下划线和切换时的下划线
m0_46340177的博客
07-23 1016
/去掉切换时el-tab-pane底部的下划线。//去掉tabs底部的下划线。
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
主要介绍了解决elementUI 切换tab后 el_table 固定列下方多了一条线问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3 Element-Plus Tabs标签页
最新发布
会写点代码
06-13 388
Vue3 Element-Plus Tabs标签页
手动动态改变el-tabs标签页顺序
06-28
例如：tabs1、tabs2、tabs3、tabs4 tabs2改为tabs4（往后移）则顺序变为tabs1、tabs3、tabs4、tabs2； tabs4改为tabs2（往前移） 则顺序变为tabs1、tabs4、tabs2、tabs3。
解决vue中el-tab-pane切换的问题
10-15
主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【Element】element el-tabs 去掉底部的下划线和切换时的下划线
毛毛的博客
09-27 2030
【Element】element el-tabs 去掉底部的下划线和切换时的下划线。
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
主要介绍了在vue中使用el-tab-pane v-show/v-if无效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue el-tab-pane 下使用div v-if 隐藏dom标签
Tianxuan_kong的博客
04-16 1317
【代码】vue el-tab-pane 下使用div v-if 隐藏dom标签。
vue2通过权限控制tab标签显示和隐藏
DZQ1223的博客
11-28 1608
在开发过程中，我们可能会遇到这样一个场景：根据不同权限对tab栏内容进行控制，这时候用自定义指令v-permission就达不到我们想要的效果，其是将当前节点的子元素进行移除，此时当前节点依然存在，如下图所示。这时候就需要利用v-if自定义控制，其思路实：v-if中执行一个函数，函数传入一个权限值。在函数中判断权限值是否属于权限菜单内，返回布尔类型值。<el-tab-pane label="负荷跟踪" name="first" v-permissions="['load_track']">
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题？
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
01-17 1342
最近开发项目时，在 el-tab-pane 标签上使用 v-show，即使v-show的值为 false，el-tab 的标签仍然展示。即使将v-show加在 slot 子节点上，也会显示 tab 的背景图和 close 图标；如下图：所以针对该问题，各种方案做了一个尝试，下面做一个总结，希望对你有帮助。
vue+element tabs选项卡分页效果
12-13
在本例中，我们将讨论如何使用 Vue 和 Element UI 来实现选项卡（tabs）结合分页的交互效果。 首先，我们来看一下文件目录结构。在这个项目中，`/account` 是一个路由路径，它会加载 `home.vue` 作为布局页面，并且...
基于element-ui标签选项卡
06-24
Element UI 的标签选项卡还支持各种交互事件，如 `tab-click` 事件可以在用户点击选项卡时触发，可以用来处理自定义逻辑。 ```html <el-tabs @tab-click="handleClick"> ``` 在 Vue 实例中定义 `handleClick`...
ElementPlus的el-tabs组件自定义标签头、去掉长分割线、去掉下划线、修改下划线的样式、修改标签头的字体颜色（选中状态和未选中状态）、修改鼠标悬浮时标签头的样式
聂可以的博客
04-12 2967
ElementPlus的el-tabs组件自定义标签头、去掉长分割线、去掉下划线、修改下划线的样式、修改标签头的字体颜色（选中状态和未选中状态）、修改鼠标悬浮时标签头的样式
解决 el-tabs 在切换页签时出现的下划线不显示问题
藕粉桂花糖糖糕的博客
05-27 192
解决 el-tabs 在切换页签时出现的下划线不显示问题
el-tab-pane 去掉下边的横线和点击是出现的横线
weixin_56381842的博客
12-09 631
el-tab-pane 去掉下边的横线和点击是出现的横线
elment ui隐藏el-tabs 组件头部显示，可通过按钮或checkbox来控制tab切换
tenggeer0789的博客
04-13 2065
主要功能如题，直接隐藏tab头部修改样式即可 <el-tabs id='tabs-area' v-model="activeName" @tab-click="handleClick" stretch style="background:"> <el-tab-pane label="" name="second"> </el-tab-pane> <el-tab-pane label="" name="first"> </e
element-ui显示和隐藏某个tab标签
肖肖肖丽珠的博客
08-17 4251
<el-tabs v-model="activeName" ref="tabs"> <el-tab-pane label="基本信息1" name="first" > 基本信息</el-tab-pane> <el-tab-pane label="基本信息2" name="second" > 基本信息</el-tab-pane> <el...
vue3+element-plus+el-tabs下展示路由内容的具体代码
04-24
非常感谢您的提问。以下是一个基于 Vue3 和 Element-Plus 的 el-tabs 下展示路由内容的示例代码： ``` <template> <div> <el-tabs v-model="activeTab" @tab-click="handleTabClick"> <el-tab-pane :label="tab.label" :key="tab.name" v-for="tab in tabs" :lazy="true"> <router-view :name="tab.name"></router-view> </el-tab-pane> </el-tabs> </div> </template> <script> import { ref } from 'vue'; export default { name: 'RouterTabs', setup() { const activeTab = ref(''); const tabs = [ { name: 'home', label: '首页' }, { name: 'about', label: '关于我们' }, { name: 'contact', label: '联系我们' } ]; function handleTabClick(tab) { activeTab.value = tab.name; } return { activeTab, tabs, handleTabClick }; } }; </script> ``` 在这个示例中，我们使用了 Element-Plus 的 el-tabs 和 el-tab-pane 组件来实现标签页功能。对于每个标签页，我们通过 router-view 组件将对应的路由内容展示出来。 当用户点击标签页时，我们使用 @tab-click 事件来更新 activeTab 的值，从而实现标签页的切换。 希望这个示例可以对您有所帮助。如果您还有其他问题或需要进一步帮助，请随时向我提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值