Element UI的Tabs 标签页位置导航栏去除线条

在这里插入图片描述
在实际开发中,我们调整了相关样式,导致导航栏的相关样式跟随不上,如下图所示:
在这里插入图片描述

因为我跳转了前边文字的样式并以在导航栏添加了相关头像,导致右边的线条定位出现问题,我在想,要不我继续调整右边线条的样式跟随左边的点击nav进行变化,要不干脆去掉算了,然后我在前端找半天,发现:
在这里插入图片描述
这玩意我在样式中硬是找不到,卡了我许久,最后发现样式调整可以在:

<template><el-radio-group v-model="tabPosition" style="margin-bottom: 30px;"><el-radio-button label="top">top</el-radio-button><el-radio-button label="right">right</el-radio-button><el-radio-button label="bottom">bottom</el-radio-button><el-radio-button label="left">left</el-radio-button></el-radio-group><!--在这里新增一个div块--><div  class="leftTabs"><el-tabs :tab-position="tabPosition" style="height: 200px;"><el-tab-pane label="用户管理">用户管理</el-tab-pane><el-tab-pane label="配置管理">配置管理</el-tab-pane><el-tab-pane label="角色管理">角色管理</el-tab-pane><el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane></el-tabs></div>
</template>
<script>export default {data() {return {tabPosition: 'left'};}};
</script><style scoped>/*去掉tabs底部的下划线*/
.leftTabs >>>.el-tabs__nav-wrap::after{position: static !important;
}.leftTabs >>>.el-tabs__active-bar{background-color: transparent !important;}
</style>

在以上代码的基础上完成我司的系统功能效果如下:
在这里插入图片描述
已经去除掉线条的背景色了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/214032.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux基础5:linux进程1(冯诺依曼体系结构+os管理+进程状态1)

冯诺依曼体系结构os管理 一.冯诺依曼体系结构&#xff1a;1.简单介绍&#xff08;准备一&#xff09;2.场景&#xff1a;1.程序的运行&#xff1a;2.登录qq发送消息&#xff1a; 3.为什么需要内存&#xff1a;1.简单的引入&#xff1a;2.计算机存储体系&#xff1a;3.内存的意义…

Sublime Text 4168最新代码编辑

Sublime Text是一款功能强大的文本编辑器&#xff0c;具有以下主要功能&#xff1a; 支持多种编程语言的语法高亮和代码自动完成功能&#xff0c;包括Python、JavaScript、HTML、CSS等。提供代码片段&#xff08;Snippet&#xff09;功能&#xff0c;可以将常用的代码片段保存…

2023年亚太杯数学建模A题水果采摘机器人的图像识别功能(matlab 部分代码)

对于1-4问针对的是附录1 中的数据 clc; close all; clear; % 图像文件夹路径 folder_path E:/新建文件夹/yatai/Attachment/Attachment 1/; % 图像文件列表 image_files dir(fullfile(folder_path, *.jpg)); % 假设所有图片都是jpg格式% 解析文件名中的数字&#xff0c;并转…

当内容创作进入 AGI 时代,你也可以成为「神笔马良」

我神笔马良的童话故事我们或多或少都听过&#xff0c;一支神笔在手&#xff0c;想画什么就能画出什么&#xff0c;栩栩如生。创造者的理解力、想象力和创作力都能通过这支神笔释放。 近一年&#xff0c;随着 AIGC 内容生产工具的快速出圈&#xff0c;有人把 Stable Diffusion、…

关于同一接口有多个不同实现的设计方案

关于同一接口有多个不同实现的设计方案 前言 最近公司做了一个银行相关的项目&#xff0c;告诉我公司对接了多个银行的支付&#xff0c;每个银行都有对应的接口要去对接&#xff0c;比如&#xff1a;交易申请&#xff0c;交易取消&#xff0c;支付&#xff0c;回单&#xff0…

小程序中的大道理--综述

前言 以下将用一个小程序来探讨一些大道理, 这些大道理包括可扩展性, 抽象与封装, 可维护性, 健壮性, 团队合作, 工具的利用, 可测试性, 自顶向下, 分而治之, 分层, 可读性, 模块化, 松耦合, MVC, 领域模型, 甚至对称性, 香农的信息论等等. 为什么不用大程序来说大道理呢? …

2023年汉字小达人市级比赛题目类型和答题策略(在线模拟题更新)

今天是2023年11月24日&#xff0c;距离2023年第十届上海市小学生汉字小达人市级比赛&#xff08;市级活动&#xff09;正式举办还有6天时间。 根据日常交流&#xff0c;六分成长发现还有一些家长和小朋友对汉字小达人的市级比赛的形式、题型不太了解&#xff0c;为此&#xff0…

短视频获客系统成功分享,与其开发流程与涉及到的技术

先来看实操成果&#xff0c;↑↑需要的同学可看我名字↖↖↖↖↖&#xff0c;或评论888无偿分享 一、短视频获客系统的开发流程 1. 需求分析&#xff1a;首先需要对目标用户进行深入了解&#xff0c;明确系统的功能和目标&#xff0c;制定详细的需求文档。 2. 系统设计&#…

【DevOps】Git 图文详解(九):工作中的 Git 实践

本系列包含&#xff1a; Git 图文详解&#xff08;一&#xff09;&#xff1a;简介及基础概念Git 图文详解&#xff08;二&#xff09;&#xff1a;Git 安装及配置Git 图文详解&#xff08;三&#xff09;&#xff1a;常用的 Git GUIGit 图文详解&#xff08;四&#xff09;&a…

H5(uniapp)中使用echarts

1,安装echarts npm install echarts 2&#xff0c;具体页面 <template><view class"container notice-list"><view><view class"aa" id"main" style"width: 500px; height: 400px;"></view></v…

G1垃圾收集器

1.G1的目的&#xff1a; Garbage First&#xff0c;也就是垃圾优先原则&#xff0c;也就是空间方面的关注点。同时照顾到停顿时间以及吞吐量。 G1垃圾收集器的设计目的是避免完全回收&#xff0c;但是当并发收集不能足够快地回收内存时&#xff0c;就会发生完全回收GC。G1的完…

学习视频剪辑方法:AI智剪助力,批量处理短视频无忧

随着短视频的兴起&#xff0c;越来越多的人开始关注如何有效地制作和发布这些内容。但是&#xff0c;短视频的制作并不容易&#xff0c;要耗费大量的时间和精力。现在有很多AI智能剪辑工具可以快速、高效地制作短视频。其中&#xff0c;AI智剪是一款非常受欢迎的视频剪辑功能&a…