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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

抖音汽车租赁小程序技术指南:开发高效便捷的租赁系统

为了更好地满足用户需求&#xff0c;抖音汽车租赁小程序成为一个备受关注的技术解决方案。本文将深入探讨开发高效便捷的汽车租赁系统所需的技术要点&#xff0c;为开发者提供一份实用的技术指南。 小程序架构选择 在搭建抖音汽车租赁小程序时&#xff0c;选择合适的小程序架构…

TIDB拓扑结构

TiDB Server&#xff1a;SQL层&#xff0c;负责接受客户端的连接&#xff0c;执行SQL解析和优化&#xff0c;最终生成分布式执行计划。TiDB Server为无状态的&#xff0c;可增加节点负载均衡。 PD (Placement Driver) Server&#xff1a;整个TiDB集群的元信息管理模块&#xf…

露营管理系统预约小程序效果如何

旅游经济已经复苏&#xff0c;并且市场规模增速加快&#xff0c;近一年来远途/周边游客户增多&#xff0c;不少旅游景区在节假日常常面对客流爆满现象。同时露营作为近几年突然火热的项目&#xff0c;其需求也是日渐上升。 然而在高需求的同时&#xff0c;我们也看到露营经营痛…

修改QtCreator/QDesigner的对象指示器高亮颜色

一、前言 QtCreator的设计中&#xff0c;高亮颜色太接近了&#xff0c;在左边点一个对象后&#xff0c;很难在右边对上&#xff0c;体验极差。 二、解决方案 创建一份style.qss&#xff0c;写入以下的样式&#xff1a; /* for QtCreator */ QDockWidget #ObjectInspector …

线上问题排查实例分析|关于 Redis 内存泄漏

Redis 作为高性能的 key-value 内存型数据库&#xff0c;普遍使用在对性能要求较高的系统中&#xff0c;同时也是滴滴内部的内存使用大户。本文从 KV 团队对线上 Redis 内存泄漏定位的时间线维度&#xff0c;简要介绍 Linux 上内存泄漏的问题定位思路和工具。 16:30 问题暴露 业…

快来考试拿证书!KubeSphere 个人技能专业考试认证上线啦!

以容器技术和容器编排为基础的云原生应用&#xff0c;被越来越多的企业用户接受和使用&#xff0c;并且在生产环境中使用容器技术的比例逐年增加。Kubernetes 无疑已经成为容器编排的事实基础&#xff0c;而依托于 Kubernetes 开发的开源容器平台 KubeSphere 也收获了一众拥趸。…

群晖NAS搭建WebDav服务做文件共享,可随时随地远程访问

文章目录 1. 在群晖套件中心安装WebDav Server套件1.1 安装完成后&#xff0c;启动webdav服务&#xff0c;并勾选HTTP复选框 2. 局域网测试WebDav服务2.1 下载RaiDrive客户端2.2 打开RaiDrive&#xff0c;设置界面语言可以选择中文2.3 点击添加按钮&#xff0c;新建虚拟驱动区2…

论文《Unsupervised Dialog Structure Learning》笔记:详解DD-VRNN

D-VRNN模型和DD-VRNN模型 总体架构 离散-可变循环变分自编码器&#xff08;D-VRNN&#xff09;和直接-离散-可变循环变分自编码器&#xff08;DD-VRNN&#xff09;概述。D-VRNN和DD-VRNN使用不同的先验分布来建模 z t z_t zt​之间的转换&#xff0c;如红色实线所示。 x t x_t…

【Effective C++】 (六) 继承与面向对象设计

【六】继承与面向对象设计 条款32 &#xff1a; 确保public继承是"is a"的关系 Item 32: Make sure public inheritance models “is-a”. C面向对象程序设计中&#xff0c;最重要的规则便是&#xff1a;public继承应当是"is-a"的关系。当Derived public继…

设计师不能忽视的几个宝藏图标设计工具

在这个快速变化的时代&#xff0c;设计师对创新和实用工具的需求越来越大。这就要求我们及时跟上潮流&#xff0c;不断探索和尝试最新、最有价值的图标设计工具。只有这样&#xff0c;我们才能在竞争激烈的设计市场中脱颖而出。以下是我们精心挑选的2024年值得一试的图标设计工…

Linux C++ 服务器端这条线怎么走?一年半能做出什么?

Linux C 服务器端这条线怎么走&#xff1f;一年半能做出什么&#xff1f; 既然你是在校学生&#xff0c;而且编程语言和数据结构的基础还不错&#xff0c;我认为应该在《操作系统》和《计算机体系结构》这两门课上下功夫&#xff0c;然后才去读编程方面的 APUE、UNP 等书。 最…

ffmpeg播放器实战(播放器流程)

1.流程图 1.main窗口创建程序窗口 程序窗口构造函数执行下面内容 2.开启播放 3.开启解码 4.开启渲染 5.反馈给ui 本文福利&#xff0c; 免费领取C音视频学习资料包学习路线大纲、技术视频/代码&#xff0c;内容包括&#xff08;音视频开发&#xff0c;面试题&#xff0c;FFmpeg…

vue中怎么根据选择的名称 生成印章图片

项目中需要根据选择的印章名称&#xff0c;动态生成印章 &#xff0c;印章下方显示当前的日期 代码如下 <template><div><label for"name">选择名称&#xff1a;</label><select id"name" v-model"selectedName">…

virtualbox 扩展磁盘后在win10 虚拟机看不到新扩展的空间

造成标题中问题的原因是&#xff0c;扩展的是win10.vdi 的空间&#xff0c;虚拟机使用使用的下边那个以uuid命名的空间&#xff0c;将这个磁盘的虚拟分配空间也调整到150G . 然后在win10的磁盘管理里就可以看到新加的空间了。之后再点相应的盘进行扩展卷操作即可。

Android跨进程传图片或者大数据(解决TransactionTooLargeException)

跨进程传图片方案 直接intent传bitmap使用文件读写intent传递自定义binder&#xff0c;binder中传递image使用网络传输 一、直接intent传bitmap 优势 使用简单 劣势 相关代码可能有侵入性&#xff0c;必须在四大组件中接收。 intent传递数据的总大小是1MB&#xff0c;其中…

SA实战 ·《SpringCloud Alibaba实战》第14章-服务网关加餐:SpringCloud Gateway核心技术

大家好,我是冰河~~ 一不小心《SpringCloud Alibaba实战》专栏都更新到第14章了,再不上车就跟不上了,小伙伴们快跟上啊! 在《SpringCloud Alibaba实战》专栏前面的文章中,我们实现了用户微服务、商品微服务和订单微服务之间的远程调用,并且实现了服务调用的负载均衡。也基…

geemap学习笔记012:如何搜索Earth Engine Python脚本

前言 本节主要是介绍如何查询Earth Engine中已经集成好的Python脚本案例。 1 导入库 !pip install geemap #安装geemap库 import ee import geemap2 搜索Earth Engine Python脚本 很简单&#xff0c;只需要一行代码。 geemap.ee_search()使用方法 后记 大家如果有问题需…

前端处理返回数据为数组对象且对象嵌套数组并重名的数据,合并名称并叠加数据

前端处理返回数据为数组对象且对象嵌套数组并重名的数据&#xff0c;合并名称并叠加数据 var newList[]; var table{}; var dataObj{}; var finalList[]; var tableData[{brName:营业部,dateStr:2023-11-23,tacheArr:[{dealCnt:20,tacheName:奔驰}]},{brName:营业部,dateStr:2…

想自学软件测试?一般人我还是劝你算了吧。。。

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

python+pytest接口自动化:token关联登录这样做,阿里p8都直呼牛逼!!!

在PC端登录公司的后台管理系统或在手机上登录某个APP时&#xff0c;经常会发现登录成功后&#xff0c;返回参数中会包含token&#xff0c;它的值为一段较长的字符串&#xff0c;而后续去请求的请求头中都需要带上这个token作为参数&#xff0c;否则就提示需要先登录。 这其实就…