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.mzph.cn/news/163775.shtml

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

相关文章

开发B2B商城的意义

开发B2B商城的意义主要体现在以下几个方面&#xff1a; 采购成本低&#xff1a;利用互联网采购&#xff0c;B2B商城的采购商可直接通过线上完成全部流程操作&#xff0c;在提高采购效率的同时&#xff0c;大大降低了B2B工业品企业采购成本。推广优势大&#xff1a;B2B商城的曝…

YM5411 WIFI 5模块 完美替代AP6256

YM5411是沃特沃德推出的一款低成本&#xff0c;低功耗的模块&#xff0c;该模块具有Wi-Fi&#xff08;2.4GHz和5GHz IEEE 802.11 a/b/g/n/ac&#xff09;蓝牙&#xff08;BT5.0&#xff09;功能&#xff0c;并通过了SRRC认证&#xff0c;带mesh&#xff0c;完美替换AP6256。高度…

OpenHarmony之NAPI框架介绍

张志成 诚迈科技高级技术专家 NAPI是什么 NAPI的概念源自Nodejs&#xff0c;为了实现javascript脚本与C库之间的相互调用&#xff0c;Nodejs对V8引擎的api做了一层封装&#xff0c;称为NAPI。可以在Nodejs官网&#xff08;https://nodejs.org/dist/latest-v20.x/docs/api/n-api…

【python爬虫】scrapy在pycharm 调试

scrapy在pycharm 调试 1、使用scrapy创建一个项目 scrapy startproject tutorial 2、在朋友pycharm中调试scrapy 2.1 通过文件run.py调试 在根目录下新建一个文件run.py(与scrapy.cfg文件的同一目录下), debug ‘run’即可 # -*- coding:utf-8 -*- from scrapy import c…

深入浅出理解libevent——2万字总结

概述 libevent,libev,libuv都是c实现的异步事件库&#xff0c;注册异步事件&#xff0c;检测异步事件&#xff0c;根据事件的触发先后顺序&#xff0c;调用相对应回调函数处理事件。处理的事件包括&#xff1a;网络 io 事件、定时事件以及信号事件。这三个事件驱动着服务器的运…

数字人是真人吗?

引言&#xff1a; 随着科技的不断进步&#xff0c;数字人作为一种新兴技术正逐渐崭露头角。数字人是通过计算机生成的虚拟人物&#xff0c;具备逼真的外貌和行为&#xff0c;令人难以分辨其与真人的差异。本文将探讨数字人是否可以被视为真人&#xff0c;并探索数字人技术在各个…

柯桥生活日语学习,打工人的日语你会吗?

打工人在日语里有几种说法: アルバイト 这是最常用的称呼,直接对应中文的“打工”。 例句: 学生の頃はスーパーでアルバイトをしていた。(我学生时代在超市打过工。) バイト これはアルバイトの略称でよく使われる。(这是アルバイト的简称,也很常用。) 例句: バイト先が決…

《第一行代码:Android》第三版-2.4.1 if 语句

本文主要讲解if语句&#xff0c;kotlin的if语句是可以有返回值的&#xff0c;就是if语句的最后一句话就是返回值。 /*** You can edit, run, and share this code.* play.kotlinlang.org*/fun main() {println("Hello, world!!!") val largelargerNumber(5,9) prin…

如何提高希音、亚马逊、国际站店铺流量转化,自养号优势及测评底层环境逻辑

随着全球贸易数字化程度加快&#xff0c;尤其是跨境电商的发展日新月异&#xff0c;在外贸出口占比越来越高&#xff0c;在这其中&#xff0c;亚马逊作为全球实力强劲的在线零售平台之一&#xff0c;吸引了大量的优秀卖家。 而这也加剧了亚马逊平台的竞争程度&#xff0c;尤其…

HCIP数据通信——BGP协议

引言 我之前写过一篇介绍ISIS的文章&#xff0c;我打算把BGP知识总结以后再做实验。那么现在就讲述一下BGP的一些特点和概念。 BGP特点 BGP属于EGP&#xff08;EGP也是BGP前身&#xff0c;指的是具体协议&#xff0c;被淘汰了成为了BGP&#xff09;&#xff0c;无类协议。 它…

C++(14):解决lambda生命期问题

C++(11):局部函数lambda_c++11 函数中定义函数-CSDN博客 中通过实例列举了lambda使用过程中可能会有变量生命期问题。 C++14中可以通过重新定义变量,并转移,解决这个问题: #include <iostream> using namespace std;class A { public:A(int data):m_data(data){cou…

继承中:一般函数的virtual虚函数特性、析构函数的virtual虚函数特性

1、一般的同名函数 c规定&#xff0c;当一个成员函数被声明为虚函数后&#xff0c;其派生类中的同名函数都自动成为虚函数。因此&#xff0c;在子类重新声明该虚函数时&#xff0c;可以加&#xff0c;也可以不加&#xff0c;但习惯上每一层声明函数时都加virtual,使程序更加清…

postgresql数据库中update使用的坑

简介 在数据库中进行增删改查比较常见&#xff0c;经常会用到update的使用。但是在近期发现update在oracle和postgresql使用却有一些隐形区别&#xff0c;oracle 在执行update语句的时候set 后面必须跟着1对1的数据关联而postgresql数据库却可以一对多&#xff0c;这就导致数据…

完整的工程项目管理流程是怎么样的?

阅读本文你将了解工程项目管理的完整流程&#xff1a;一、项目启动阶段&#xff1b;二、项目规划阶段&#xff1b;三、项目执行阶段&#xff1b;四、项目收尾阶段&#xff1b;五、项目总结与反馈。 这是一个工程项目管理的完整流程&#xff1a; 项目启动阶段&#xff1a;也就…

xlsxwriter.exceptions.FileCreateError: [Errno 13] Permission denied: ‘E:

xlsxwriter.exceptions.FileCreateError: [Errno 13] Permission denied: ‘E:\、、、、、’ 如果你尝试了各种修改文件权限的方法都还不行的话 有可能是因为你打开了想要修改的文件&#xff0c;关闭就好啦

Android12 ROM定制导读

一、前言 本专栏出现的原因: 沉淀自己,距离上一篇博客已经过去几个月了,笔者最近工作上的事情非常忙,导致博文断更了,今天忙里偷闲有一段短暂的时间,把这段时间遇到的问题准备整理一下,以文章的形式记录下来。Android10的专栏也会慢慢更新。让笔者最为感慨的就是Androi…

C语言分支限界法求解01背包问题

分支限界法是一种求解优化问题的算法&#xff0c;针对01背包问题&#xff0c;它可以通过在搜索过程中剪枝&#xff0c;减少搜索空间的大小&#xff0c;提高算法的效率。 具体来说&#xff0c;分支限界法会将当前状态下的可行解集合分成若干个子集&#xff0c;每个子集代表一条…

Java特殊文件读取案例Properties

代码 package com.itheima.d1;import java.io.FileNotFoundException; import java.io.FileReader; import java.io.FileWriter; import java.util.Properties;public class Test3 {public static void main(String[] args) throws Exception {//目标&#xff1a;读取属性文件…

SpringBoot通过@Scheduled实现定时任务

Spring自带的定时任务系统&#xff0c;使用注解时必须指定任意一个参数&#xff08;属性&#xff09;&#xff1a;cron、fixedDelay或fixedRate&#xff1b; 1. 启动类添加开启注解 EnableScheduling 2. cron参数 /** * cron 一共可以有7个参数 以空格分开 其中年不是必须参…

java项目之品牌银饰售卖平台(ssm+vue)

项目简介 主要功能包括首页、个人中心、用户管理、促销活动管理、饰品管理、我的收藏管理、系统管理、订单管理等。管理员模块: 管理员可以查询、编辑、管理每个用户的信息和系统管理员自己的信息&#xff0c;同时还可以编辑、修改、查询用户账户和密码&#xff0c;以及对系统…