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.pswp.cn/news/163775.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/163775.shtml
英文地址,請注明出處:http://en.pswp.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;以及對系統…