elementui Tabs组件修改样式自定义样式去掉底部横线等

冷不防 2023-01-17 02:26 880阅读 0赞

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

在type="card"基础上修改elementui原有样式

<template>
    	<div class="asset-detail-tabs">
    		<el-tabs v-model="activeName" type="card">
    			<el-tab-pane label="基本信息" name="1">
    				
    			</el-tab-pane>
    			<el-tab-pane label="字段详情" name="2">
    				
    			</el-tab-pane>
    			<el-tab-pane label="数据样例" name="3">
    				
    			</el-tab-pane>
    			<el-tab-pane label="数据质量" name="4">
    				
    				
    			</el-tab-pane>
    			<el-tab-pane label="数据血缘" name="5">
    				
    			</el-tab-pane>
    			<el-tab-pane label="数据指标" name="6">
    				
    			</el-tab-pane>
    			<el-tab-pane label="数据报表" name="7">
    				
    			</el-tab-pane>
    		</el-tabs>
    	</div>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				activeName: '1'
    			}
    		},
    	}
    </script>
    <style>
    .asset-detail-tabs { 
    		min-height: 400px;
    		margin: 20px 0px;
    		background-color: #fff;
    		
    		//修改tab-item样式
    		>>> .el-tabs__item { 
    			width: 166px;
    			height: 47px;
    			line-height: 47px;
    			text-align: center;
    			font-size: 16px;
    			font-weight: bold;
    		}
    		
    		// 修改nav背景色
    		>>>.el-tabs__nav-scroll { 
    			background-color: #ECEEF3;
    		}
    		
    		//去除顶部线
    		>>>.el-tabs--card>.el-tabs__header .el-tabs__nav { 
    			border: none;
    		}
    		
    		//内容区
    		>>> .el-tabs__content { 
    			padding: 10px;
    		}
    		
    		//选中时样式设置
    		>>> .el-tabs--card>.el-tabs__header .el-tabs__item.is-active { 
    			background-color: rgba(255, 255, 255, 100);
    			color: rgba(97, 154, 241, 100);
    		}
    		
    	}
    </style>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]: /images/20221022/08b1efd59b3d4e45afda5f58777970bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70 1]: /images/20221022/7ea366f937894fe490c34c70cf8055e9.png