Element-UI 样式修改合集_element ui 表单美化

目录

一、表格 el-table

1、表格表头设置背景色及居中设置

2、表格背景修改为透明

3、表格自带的横线去除

4、表格中行高和字体大小调整

二、表单 el-form

1、修改一个label的样式

三、弹出框 el-popover

---

一、表格 el-table

1、表格表头设置背景色及居中设置

<template>
	<el-table
		:header-cell-style="headClass"
		:cell-style="rowClass">
	</el-table>
</template>
 
<script>
export default {
	methods: {
		// 表头样式设置
		headClass () {
  			return 'text-align: center;background:#eef1f6;'
		},
		// 表格样式设置
		rowClass () {
 			return 'text-align: center;'
		}
	}
}
</script>

2、表格背景修改为透明

外部标签 >>> .el-table,
外部标签 >>> .el-table__expanded-cell {
  background-color: transparent !important;
}
外部标签 >>> .el-table th,
外部标签 >>> .el-table tr,
外部标签 >>> .el-table td {
  background-color: transparent !important;
}

3、表格自带的横线去除

// 去掉所有的横线
.el-table__row>td{ border: none; }
.el-table::before { height: 0px; }
 
// 只去除表格的最最底部的横线
div /deep/ .el-table--border::after,
div /deep/ .el-table--group::after,
div /deep/ .el-table::before {
	background-color: transparent;
} 

4、表格中行高和字体大小调整

（1）行高调整

// 方法一：
element-table的size属性，取值：mini/small/medium
 
// 方法二：height的最小取值是80px，可以无限增大
:row-style="{height:'80px'}"
 
// 方法三：
:cell-style="{padding:'0px'}"
 
// 方法四：设置css以调整表格行高，需要留意如果是scoped，注意使用/deep/等
.el-table__row {  
  line-height: 50px; /* 设置你想要的行高 */  
} 
 
// 使用参照：
<el-table
    size:mini/small/medium;
    :row-style="{height:'20px'}";
    :cell-style="{padding:'0px'}";>

（2）字体大小调整

// 方法一：使用行内样式
style="font-size: 10px"
 
// 方法二：使用css以调整表格字体大小，需要留意如果是scoped，注意使用/deep/等
.el-table__cell {  
  font-size: 16px; /* 设置你想要的字体大小 */  
}
 
// 使用参照：
<el-table style="font-size: 10px">

二、表单 el-form

1、修改一个label的样式

样式修改不要全局，使用/deep/穿透

<el-form>
  <el-form-item label="活动区域" class="change-label-calss">
       <el-input v-model=""></el-input>
  </el-form-item>
</el-form>
<style scoped>
    .change-label-calss /deep/ .el-form-item__label{
        color: red;
    }
</style>

三、弹出框 el-popover

popover的dom创建在了最外层。它是和根组件app同级的dom，所以在任何 <style scoped></style>下写的css均不能生效。如果直接在<style></style>下粗暴修改，势必又会影响到其他组件的样式。

element-ui提供了 popper-class 这个类帮我们设置格式化的css样式以覆盖原有样式。

<template>  
  <div class="temp">   
    <el-popover :popper-class="yourClass">  
    </el-popover>  
  </div>  
</template> 
 
<style scoped>
</style>
 
<style>
//最外层div,修改背景色，边框
.el-popover.yourClass {
  background-color: #090d29;
  border-color: #146ebd;
}
//修改title颜色
.yourClass .el-popover__title {
  color: white;
}
//修改下面的小三角，属性名根据组件的placement位置做相应修改
.yourClass .popper__arrow::after {
  border-top-color: #090d29 !important;
}
</style>