使用ElementUI修改el-tabs標(biāo)簽頁組件樣式
更新時(shí)間：2022年08月10日 16:48:51 作者：asdfsdgfsdgfa
這篇文章主要介紹了使用ElementUI修改el-tabs標(biāo)簽頁組件樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
ElementUI修改el-tabs標(biāo)簽頁組件樣式
官方示例：https://element.eleme.cn/#/zh-CN/component/tabs
效果圖
<el-tabs
v-model="activeName"
@tab-click="handleClick"
:stretch="false"
style="color: white; height: 300px; width: 100%;caret-color: transparent;"
>
<el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定時(shí)任務(wù)補(bǔ)償" name="fourth"
>定時(shí)任務(wù)補(bǔ)償</el-tab-pane
>
</el-tabs>修改css：
::v-deep .el-tabs__content {
overflow: visible;
}
::v-deep .el-tabs__item {
color: white;
}
::v-deep .el-tabs__item.is-active {
color: #15cbf3;
}
::v-deep .el-icon-arrow-left {
color: white;
}
::v-deep .el-icon-arrow-right {
color: white;
}
::v-deep .el-tabs__nav-wrap::after {
height: 0;
}
::v-deep .el-tabs__active-bar {
background-color: #15cbf3;
}ElementUI的el-tabs標(biāo)簽頁樣式?jīng)_突問題
我這里是用一個(gè)標(biāo)簽頁套入了另一個(gè)標(biāo)簽頁，但是所有的最后一個(gè)都與其它的對(duì)不齊
這是官網(wǎng)代碼，不多說，看一下大致邏輯
<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="定時(shí)任務(wù)補(bǔ)償">定時(shí)任務(wù)補(bǔ)償</el-tab-pane>
</el-tabs>
修改樣式即可
根據(jù)自身需要，修改px的數(shù)值
.el-tabs--bottom .el-tabs--left>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--left>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child {
padding-right: 10px
}
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板的兩種方法
這篇文章主要介紹了VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能，本文通過兩種方法，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
Element-ui?DatePicker日期選擇器基礎(chǔ)用法示例
這篇文章主要為大家介紹了Element-ui?DatePicker日期選擇器基礎(chǔ)用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
下面小編就為大家分享一篇vue.js項(xiàng)目打包上線的圖文教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-11-11
淺談 Vue v-model指令的實(shí)現(xiàn)原理
vue的v-model是一個(gè)十分強(qiáng)大的指令,它可以自動(dòng)讓原生表單組件的值自動(dòng)和你選擇的值綁定,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Vue?websocket封裝實(shí)現(xiàn)方法詳解
項(xiàng)目中需要使用websocke，這個(gè)是我自己修修改改好多次之后用得最順手的一版，分享一下。這個(gè)封裝需要搭配vuex使用，因?yàn)槭盏降臄?shù)據(jù)都保存在vuex中了，真的絕絕子好用，解決了我一大堆問題2022-09-09
Vue項(xiàng)目打包后可修改基礎(chǔ)接口地址配置的具體操作
vue項(xiàng)目打包過后發(fā)現(xiàn)地址錯(cuò)了或者發(fā)布到別的服務(wù)器發(fā)現(xiàn)請(qǐng)求的地址不對(duì),每次都要去重新打包,太浪費(fèi)時(shí)間,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包后可修改基礎(chǔ)接口地址配置的具體操作,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue3下eslint配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)前端列表拖拽功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2023-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)通知或詳情類彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3??mark.js?實(shí)現(xiàn)文字標(biāo)注功能(案例代碼)
這篇文章主要介紹了vue3??mark.js?實(shí)現(xiàn)文字標(biāo)注功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09