应用中经常会遇到根据美工设计，修改
element-ui中table、input等组件默认样式的需求
一般解决的方法为在
<style></style>中直接重写对应样式，将其应用于全局，这样的缺点是牵一发而动全身。
css中通过添加
/deep/，可以修改element-ui全局样式，同时只作用于当前组件
- 修改
el-table样式
/**
table样式
*/
.regulaContainer /deep/ .el-table td {
border-bottom: 1px solid #0c4e97;
}
.regulaContainer /deep/ .el-table th.is-leaf {
border-bottom: 1px solid #0c4e97;
}
.regulaContainer /deep/ .el-table {
background-color: transparent;
border-top: 2px solid #0c4e97;
border-bottom: 2px solid #0c4e97;
}
.regulaContainer /deep/ .el-table th {
background-color: transparent;
}
.regulaContainer /deep/ .el-table tr {
background-color: transparent;
}
.regulaContainer /deep/ .el-table__body tr:hover > td{
background-color: rgba(0, 83, 159, 0.6);
}
.regulaContainer /deep/ .el-table::before{
background-color: transparent;
}
.regulaContainer /deep/ .el-checkbox__inner{
border: 1px solid #047edb;
background-color: transparent;
}
regulaContainer为当前组件的class
- 修改滚动条样式
***
滚动条
*/
.reserReguCard /deep/ ::-webkit-scrollbar-thumb {
background-color: #1160b5;
/*滑动条表面*/
/*border:solid 1px gainsboro; !*滑动条边框*! */
border-radius: 15px;
/*滑动条圆角宽度*/
}
.reserReguCard /deep/ ::-webkit-scrollbar-track-piece {
background-color: #013a78;
border-radius: 15px;
/*滑道*/
/*-webkit-border-radius: 4px; !*滑道圆角宽度*!*/
}
结果如图所示：
table.png
- 修改
button渐变样式
/**
button样式
*/
.regulaContainer /deep/ .el-button {
border-radius: 4px;
}
.regulaContainer /deep/ .el-button--primary {
background: -webkit-linear-gradient(left, #31aaff, #156cfb);
}
.regulaContainer /deep/ .el-button--danger {
background: -webkit-linear-gradient(left, #ff8e78, #fc4545);
}
.regulaContainer /deep/ .export {
background: -webkit-linear-gradient(left, #00ffff, #00c6ff);
border: 1px solid #00ffff;
color: white;
}
如图所示：
button.png
- 修改
el-select下拉框的样式
因el-select下拉框是独立于组件的，常用的修改方法不起作用，为自定义样式，可以利用
popper-class设置下拉框的class，从而设置样式
如下图所示：
el-select-dropdown.png
- 设置
class
<el-select
v-model="rainForm.resName"
placeholder="请选择水库"
class="innerWidth"
popper-class="select-option"
@change="handleSearch"
>
<el-option label="全部" value></el-option>
<el-option v-for="item in reservoirs" :key="item" :label="item" :value="item"></el-option>
</el-select>
- 利用
class自定义样式
<style>
.select-option {
background-color: rgba(25, 51, 88, 0.9) !important;
border: 1px solid #00b3ff !important;
box-shadow: 0 2px 12px 0 rgba(0, 152, 217, 0.5) !important;
}
</style>
最终结果如下图所示：
el-select-dropdown.png
- 修改
el-date-picker日期下拉框样式
与设置
el-select方法一样，利用popper-class实现
- 设置
class
<el-date-picker
popper-class="date-prop"
type="datetime"
placeholder="选择开始日期"
v-model="form.startTime"
></el-date-picker>
2.利用class自定义样式
<style>
.date-prop .el-input__inner {
background-color: transparent;
color: #606266 !important;
border: 1px solid #dcdfe6;
}
</style>
