Element-UI 样式修改合集

糯米团仔

已于 2024-06-19 10:44:06 修改

阅读量179

点赞数 2

分类专栏：前端文章标签： ui vue.js javascript

于 2024-06-05 18:26:42 首次发布

本文链接：https://blog.csdn.net/glutinous_Rice/article/details/139479376

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、表格 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>

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>