ElementUI Tabs标签页去除样式中的border 横向和竖向

快来打我* 2022-12-27 09:20 620阅读 0赞

## 横向： ##

![在这里插入图片描述][20201210101013599.png_pic_center]  
![在这里插入图片描述][20210204112529160.png_pic_center]

给tabs自定义class:deleteBorder

/*去掉el-tab-pane底部灰色线条*/
    .deleteBorder .el-tabs__nav-wrap::after{ 
        height: 0;
      }
      /*去掉el-tab-pane切换时的蓝色下划线*/
     .deleteBorder .el-tabs__active-bar{ 
       background: transparent;
     }

## 竖向： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]

<template>
    	
    	<div class="tabLeft">
    		<el-tabs :tab-position="'left'" style="height: 200px;">
    			<el-tab-pane>
    				<span slot="label"><i class="el-icon-date"></i> 我的行程</span>
    				我的行程
    			</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>
    <style lang="scss" scoped>
    	
    	.tabLeft>>>.el-tabs__nav-wrap::after {
    		height: 0;
    	}
    
    	/*tabs 去掉el-tab-pane切换时的蓝色下划线*/
    	.tabLeft>>>.el-tabs__active-bar {
    		background-color: transparent !important;
    	}
    </style>

[20201210101013599.png_pic_center]: /images/20221120/160e1981d7904b75acbb63d85bdc9dfb.png
[20210204112529160.png_pic_center]: https://img-blog.csdnimg.cn/20210204112529160.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210602150154498.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds,size_16,color_FFFFFF,t_70