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

news2024/11/16 11:36:01

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

因为我跳转了前边文字的样式并以在导航栏添加了相关头像,导致右边的线条定位出现问题,我在想,要不我继续调整右边线条的样式跟随左边的点击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.coloradmin.cn/o/1249174.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

电磁建模的分布式并行计算技术

本文提出了一种新的分布式并行电磁建模技术&#xff0c;以加快电磁结构的神经网络建模过程。现有的电磁建模技术通常需要反复改变微波器件的参数&#xff0c;驱动电磁模拟器以获得足够的训练和测试样本。随着电磁建模问题复杂性的增加&#xff0c;由于单台计算机的性能有限&…

【点云surface】 凹包重构

1 处理过程可视化 原始数据 直通滤波过滤后 pcl::ProjectInliers结果 pcl::ExtractIndices结果 凹包结果 凸包结果 2 处理过程分析&#xff1a; 原始点云 ---> 直通滤波 --> pcl::SACSegmentation分割出平面 -->pcl::ProjectInliers投影 --> pcl::ConcaveHull凹包…

rsyslog学习

rsyslog是什么 RSYSLOG&#xff08;Remote System Logging&#xff09;是一个开源的日志处理工具&#xff0c;用于在 Linux 和 Unix 系统上收集、处理和转发日志。它是一个健壮且高性能的日志处理程序&#xff0c;可以替换 Syslogd 作为标准的系统日志程序。RSYSLOG 提供了许多…

如何利用4G路由器构建茶饮连锁店物联网

随着年轻消费群体的增长&#xff0c;加上移动互联网营销的助推&#xff0c;各类新式奶茶消费风靡大街小巷&#xff0c;也促进了品牌奶茶连锁店的快速扩张。 在店铺快速扩张的局势下&#xff0c;品牌总部对于各间连锁店的零售统计、营销规划、物流调配、卫生监测、安全管理等事务…

qs-一个序列化和反序列化的JavaScript库

起因 一个业务场景中&#xff0c;最终得到一串字符"status[0]value1&status[1]value2" 通过解析&#xff0c;理应得到一个数组&#xff0c;却得到一个对象 于是展开问题排查 最终发现是qs.parse 这个地方出了问题 排查结果 qs解析这种带下标的字符串时&#xff…

视频号小店如何上架商品?新手应该怎么做?实操分享!

我是电商珠珠 视频号小店开通之后&#xff0c;很多人都不明白怎么去进行商品上架的。 其实&#xff0c;上架方式一共有两种&#xff0c;接下来我详细的来给大家讲一讲具体的上架流程。 一、软件 在商品上架的时候&#xff0c;我一般会用到软件来采集商品上架。 软件上架的…

19.oracle11g中的游标

oracle11g中的游标 一、案例引入二、什么是游标三、隐式游标1、隐式游标的属性2、创建语法3、示例 四、显示游标1、显示游标的属性2、创建语法3、示例 五、REF游标1、REF游标的属性2、创建语法3、示例 六、循环游标1、 循环游标的作用2、用for 与 loop 创建3、示例 一、案例引入…

渗透测试信息搜集

注&#xff1a;太简陋了&#xff0c;不忍直视 渗透测试信息收集 黑盒测试&#xff1a;给域名 灰盒测试&#xff1a;给域名、账户(或密码) 白盒测试&#xff1a;给域名、账户、密码 授权书 对安全公司进行授权 攻防演习 是对个人进行授权 渗透测试&#xff1a;&#xff0…

【2023.11.24】Mybatis基本连接语法学习➹

基本配置 1.如果使用Maven管理项目&#xff0c;需要在pom.xml中配置依赖。 2.安装Mybatis-3.5.7.jar包 3.进行XML配置&#xff1a;这里将文件命名为mybatis-config.xml 配置数据库连接XML文件 <?xml version"1.0" encoding"UTF-8" ?> <!DO…

【华为数通HCIP | 网络工程师】821-IGP高频题、易错题之OSPF(5)

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️…

周报6_YMK

周报6 本周主要在看代码&#xff1a;看Medusa头的代码发现不是很了解base_model那部分&#xff0c;所以又去看了llama2的代码和一些相关博客。 重写了一部分佛山中医学院项目的代码&#xff0c;更规范一些。 调研CosmoFlow&#xff0c;是一个深度学习预测宇宙参数的模型&…

面试题:Java 对象不使用时,为什么要赋值 null ?

文章目录 前言示例代码运行时栈典型的运行时栈Java的栈优化提醒 GC一瞥提醒 JVM的“BUG”总结 前言 最近&#xff0c;许多Java开发者都在讨论说&#xff0c;“不使用的对象应手动赋值为null“ 这句话&#xff0c;而且好多开发者一直信奉着这句话&#xff1b;问其原因&#xff…

python命令行交互 引导用户选择宠物

字多不看&#xff0c;直接体验 代码 以下代码将在命令行中&#xff0c;引导用户选择一个或者多个宠物&#xff0c;并反馈用户选择的宠物 # -*- coding:UTF-8 -*- """ author: dyy contact: douyaoyuan126.com time: 2023/11/22 15:19 file: 在命令行中引导用户…

实例分割12篇顶会论文及代码合集,含2023最新

同学们&#xff0c;你们觉得视觉经典四个任务中哪个最难&#xff1f;我个人觉得是实例分割。 因为它既具备语义分割的特点&#xff0c;需要做到像素层面上的分类&#xff0c;也具备目标检测的一部分特点&#xff0c;即需要定位出不同实例&#xff0c;即使它们是同一种类。 但…

C# 时间计算(二)

目录 五、时间比较 六、时间数据转换 七、时间间隔计算 八、获取网络时间 九、时间戳 十、时区时间 结束 概述 在 C# 中&#xff0c;DateTime 用于处理日期和时间的内置类&#xff0c;其值范围为 00&#xff1a;00&#xff1a;00 (午夜) &#xff0c; 0001年1月1日&…

高压放大器应用领域分享:关于电磁波的极化,看这篇文章就够了!

谈到电磁波&#xff0c;除了频率和幅度之外&#xff0c;还有一个比较重要的方面就是&#xff1a;极化。极化&#xff0c;就是指波振动的平面&#xff0c;电磁波的传播是由相互垂直的电场和磁场产生的。因此存在电场和磁场两个相互垂直的振荡平面&#xff0c;所以呢&#xff0c;…

力扣 3. 无重复字符的最长子串

题目 题解 方法 public static int lengthOfLongestSubstring(String s) {HashSet<Character> charSet new HashSet<Character>();int i 0,l0,max0;for (int j 0; j < s.length(); j) {while (charSet.contains(s.charAt(j))) {charSet.remove(s.charAt(l…

一个干净的前端架构是什么样的?

干净的前端架构,围绕这个话题有很多原则&#xff1a; SOLID、KISS&#xff08;保持简单明了&#xff09;、DRY&#xff08;不要重复自己&#xff09;、DDD&#xff08;领域驱动设计&#xff09;等等。 为什么需要前端架构&#xff1f; 功能性和非功能性的要求不仅应该在后端…

如何处理git多分支

本篇文章主要处理以下两种多分支问题 如何将自己在本地的修改上传到一个新的Git分支&#xff08;比如用于测试&#xff0c;不合并进main分支&#xff09;&#xff1f;如何在一个新的本地仓库拉取一个项目的非main分支&#xff0c;并处理他们关联关系&#xff1f; 1. 将自己在…

智能条件单具体操作步骤,解放你投资双手!

一般我们说到量化交易都觉得很困难&#xff0c;写策略难&#xff0c;看python难&#xff0c;不会使用程序难&#xff0c;电脑交易不方便难&#xff0c;今天我们来看看手机电脑都可以使用的量化基础条件单的操作。迈入量化第一步&#xff0c;条件单的使用。 很多投资者不清楚条件…