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>
在以上代码的基础上完成我司的系统功能效果如下:

已经去除掉线条的背景色了。
相关文章:
Element UI的Tabs 标签页位置导航栏去除线条
在实际开发中,我们调整了相关样式,导致导航栏的相关样式跟随不上,如下图所示: 因为我跳转了前边文字的样式并以在导航栏添加了相关头像,导致右边的线条定位出现问题,我在想,要不我继续调整右边…...
【Python 训练营】N_1 验证密码
N_1 验证密码 题目 设计一个用户密码验证程序,要求密码输入只有3次机会,且密码中不能包含”*”字符。 分析 需要考虑3个问题:验证次数、特殊字符和正误密码判断;验证次数需要使用循环,3个问题需要用到分支结构&…...
Pinia 和 Vuex 的对比,storeToRefs 的原理
目录 1,Pinia 介绍2,和 Vuex 的对比3,storeToRefs 源码分析 1,Pinia 介绍 官网简介 Pinia 使用上的问题,官方文档很详细,这里不做赘述。 Pinia 是 Vue 的专属状态管理库,支持vue2和vue3&#x…...
Mycat分库分表的操作(配置)
Mycat是一个开源的分布式数据库中间件,它可以对数据库进行分库分表的操作,以下是Mycat分库分表的操作步骤: 配置数据源:将要操作的数据库和表通过Mycat的配置文件配置到数据源中。配置分片规则:根据分库分表的需求&am…...
android的canvas的clipRegion废弃替代代码
由于clipRegion的一些问题,导致他被废弃了,但又有时候会用到,所以写了一个工具类来替代它 代码如下 package com.example;import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.g…...
KubeSphere 社区双周报 | Fluent Operator 2.6.0 发布 | 2023.11.10-11.23
KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书、新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列社区动态。 本次双周报涵盖时间为:2023.11.10-2023.…...
【通俗易懂】git原理、安装及连接gitlab,github
目录 一、GIT原理【这部分也挺简单,可以看看,如果没时间可以直接跳到第二部分】 SVN与Git的的区别 二、安装Git 2.1 获取Git安装程序 2.2 Git安装过程 三、Git连接Gitlab 3.1 gitlab准备工作 3.2 本地计算机准备工作及配置git 四、Git连接Github…...
TCP /UDP协议的 socket 调用的过程
在传输层有两个主流的协议 TCP 和 UDP,socket 程序设计也是主要操作这两个协议。这两个协议的区别是什么呢?通常的答案是下面这样的。 TCP 是面向连接的,UDP 是面向无连接的。TCP 提供可靠交付,无差错、不丢失、不重复、并且按序…...
外贸独立站外部优化:提升网站可见度与吸引力的策略
随着全球电子商务的快速发展,外贸独立站已经成为众多企业拓展海外市场、提升品牌影响力的关键工具。然而,要想在竞争激烈的外贸市场中脱颖而出,除了产品优质、服务周到外,还需要做好网站的外部优化工作。本文将详细探讨如何通过有…...
buildAdmin 后端控制器的代码分析
buildAdmin的代码生成,很像是 fastadmin 的生成模式,当我们利用数据库生成了一个控制器的时候,我们可以看到, 它的生成代码很简洁 <?phpnamespace app\admin\controller\askanswer;use app\common\controller\Backend;/*** 回…...
Python丨让简历脱颖而出的关键,居然是“它”!
进入疫情后时代,各行各业都在力争新的发展!财会行业亦是如此,浏览各大招聘网站,不难发现财会相关岗位的招聘要求越来越“卷”,那求职者如何才能让自己获得面试邀请呢? 答案就是:一份亮眼且具有…...
CMake中常见的预定义变量
文章目录 CMake常见的预定义变量CMake variables官方文档 CMake常见的预定义变量 在 CMake 中,有一些常见的预定义变量,它们提供了有关项目、目录结构和构建环境的信息。这些变量可用于设置路径、传递参数、以及进行其他与构建过程相关的操作。 以下是…...
.netcore 获取appsettings
我的开发环境是abpvnext net6.0 。 因为业务需要,从原来老项目net4.5工程里复制了一个报表导出的业务类到net6项目里面,但是他的获取appsettings的代码其实不用想都知道会报错。因为原来framwork时代获取appsettings的方法常见的是 System.Configura…...
额温枪方案,MS8551,MS8601;MS1112,MS1100
鉴于测温的传感器信号非常微弱,需要用高精度、低噪声的运算放大器和高精度、低功耗的ADC。 运算放大器可供选择:MS8551 or MS8601,具有低失调(1uV)、低噪(22nV√Hz )、封装小等优点,…...
数字图像处理基础-用通俗语言进行超详细的总结
目录 图像感知与获取 韦伯定理 马赫带效应 图像获取 图像的采样和量化 图像内插(重采样) 图像的表示与描述 像素间的关系 exercise:4-邻域连通区域标记 本文章讲解数字图像处理的基础,大部分内容来源于课堂笔记中 图像感…...
3.3.1详解linux内核链表list_head及其接口应用
文章目录 1 list定义2 list接口2.1 list初始化方法1:定义并初始化链表方法2:先定义再初始化链表2.2 list_add2.3 list_del2.4 list_replace2.5 list_move2.6 list_splice3 list遍历3.1 list_entry3.2 list_first_entry3.3 list_last_entry3.4 list_first_entry_or_null3.5 li…...
发挥云计算潜力:Amazon Lightsail 与 Amazon EC2 的综述
文章作者:Libai 欢迎来到云计算世界,这里有无数的机会和无限的应用程序增长。 在当今的数字时代,企业可能会发现管理基础架构和扩展应用程序具有挑战性。 传统的本地解决方案需要大量的硬件、软件和维护前期投资。 要满足不断增长的需求&…...
【深度学习】卷积神经网络(CNN)
一、引子————边界检测 我们来看一个最简单的例子:“边界检测(edge detection)”,假设我们有这样的一张图片,大小88: 图片中的数字代表该位置的像素值,我们知道,像素值越大&#…...
科普:多领域分布式协同仿真
分布式协同仿真是一种在分布式计算环境中进行协同工作的仿真方法。使用该方法进行协同仿真时,仿真任务将被分发到多个计算节点上,并且这些节点可以同时工作以模拟完整的系统行为。分布式协同仿真已被广泛应用于工程、科学和军事领域,以便更好…...
openstack(2)
目录 块存储服务 安装并配置控制节点 安装并配置一个存储节点 验证操作 封装镜像 上传镜像 块存储服务 安装并配置控制节点 创建数据库 [rootcontroller ~]# mysql -u root -pshg12345 MariaDB [(none)]> CREATE DATABASE cinder; MariaDB [(none)]> GRANT ALL PR…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
