el-table表格样式修改_el table 样式修改

el-table基本用法

<div class="user_skills">
	 <el-table class="tableIner" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column v-for="(item,i) in workList" :label="item.name">
				<template slot-scope="scope">{{ scope.row[item.engName] }}</template>
			</el-table-column>
			<el-table-column label="操作" width="200">
				<template slot-scope="scope">
						<el-button type="text" size="small">编辑合同</el-button>
						<el-button type="text" size="small">合同下载</el-button>
				</template>
			</el-table-column>	    			
	</el-table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13

效果

希望达到的效果

样式修改

	::v-deep .user_skills{
		.el-table::before {	//去除底部白线
			height: 0px;
		}
		
		.el-table {
			
			background-color: transparent; //背景色设为透明
			border-radius: 10px;//圆角边框
			th.el-table__cell.is-leaf {//设置表头底部边框为绿色
				    border-bottom: 1px solid Rgb(128,255,255,60%);
				}
			th { //表头背景为蓝色渐变色，文字颜色为白色，不加粗
			    padding-top: 9px;//设置行高（通过padding控制）
			    padding-bottom:6px;
				background: linear-gradient(180deg,rgba(1,84,120,1.00), #040b37 100%);
				color: #ffffff;
				font-weight: normal;
			}
			tr{//每一行背景色设为透明
			   
				background-color: transparent;
				&:hover {//鼠标悬浮变色
				  td {
				    background-color:#1B4584 !important;
				    
				  }
				}
				td {//每一行的每一列文字为白色，底部边框为绿色，
				     padding-top: 6px;//设置行高（通过padding控制）
					 padding-bottom:6px;
					color: #fff;
					border-bottom: 1px solid Rgb(128,255,255,60%);
					
				}
				td:first-child{//第一列的文字颜色为绿色
				    
					color: #80ffff;
					
				}
			}
			th.el-table__cell:first-child.cell {//第一个表头缩进30px
			    padding-left: 30px;
			}
			.el-table__cell:first-child .cell {//第一列数据缩进30px
				padding-left: 30px;
			}
			.el-button--text{//按钮颜色为绿色
				color:#80ffff;
			}
			
		}
		
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

效果