Element-plus修改样式

场景
通过样式穿透修改前端element组件样式。
实现
1.button按钮

::v-deep .el-button {
border-radius: 0;
border: 0;
background-color: rgba(0, 194, 255) !important;
color: black;
}

2.form表单

::v-deep .el-form {
text-align: left;
.el-form-item {
text-align: left;
.el-form-item__label {
color: skyblue;
text-align: left;
}
.el-form-item__content {
color: skyblue;
text-align: left;
}
}
}

3. input输入框

::v-deep .el-input {
width: 300px;
border: none;
.el-input__wrapper {
background-color: transparent !important;
border: none;
// border-color: rgba(37, 65, 125, 1) !important;
.el-input__inner {
color: skyblue;
}
}
}

4. 内嵌过深的input以及type="textarea"的input

.el-input {
:deep(.el-input__wrapper) {
box-shadow: 0 0 0 0px var(–el-input-border-color, var(–el-border-color)) inset;
// 去除input白色边框
–el-input-text-color: skyblue; // 修改input输入框字体颜色
–el-input-icon-color: rgb(208, 192, 192); // 修改icon颜色
}
}

.el-textarea{
:deep(.el-textarea__inner) {
box-shadow: 0 0 0 0px var(–el-input-border-color, var(–el-border-color)) inset;
// 去除input白色边框
–el-input-text-color: skyblue; // 修改input输入框字体颜色
–el-input-icon-color: rgb(208, 192, 192); // 修改icon颜色
background-color: transparent !important;
resize: none;
}
}

5. select下拉框

::v-deep .el-input__inner{
width: 200px;
height: 3vh;
color: #fff;
background-color: transparent;
border: 1px solid #3b62a1;
margin: 0 5px;
}
::v-deep .el-input__icon{
line-height: 100%;
}

6. collapse折叠面板

:deep(.el-collapse){
border: none;
overflow-y: hidden;
}
:deep(.el-collapse-item__wrap){
background-color: transparent;
border: none;
}
:deep(.el-collapse-item__header){
background-color: #000;
color: #fff;
padding-left: 5px;
height: 30px;
border: none;
}
:deep(.el-collapse-item__content){
background-color: transparent;
color: rgb(163, 181, 263);
}

7. Tab 选项卡

:deep(.el-tabs__item){ //选项属性
height: 25px;
line-height: 25px;
border: none;
}
:deep(.el-tabs–card>.el-tabs__header .el-tabs__nav){ //tab头部
border-radius: 0;
border: none;
background-color: rgb(20, 27, 39);
}
:deep(.el-tabs–card>.el-tabs__header){ //tab头部标签
border-bottom: 0;
}
:deep(.el-tabs__item.is-active){ //选中状态
color: #fff;
background-color: rgb(21, 51, 111);
}
:deep(.el-tab-pane){ //内容
padding: 0 10px;
font-size: 12px;
}

8. table内部加入透明滚动条

::v-deep .el-table__inner-wrapper {
overflow-y: auto;
&::-webkit-scrollbar {
width: 4px; /* y轴滚动条宽度 /
height:4px; / x轴滚动条宽度 */
background-color: #f5f5f5; /滚动条背景/
}

另一种改变滚动条样式的方法：

:deep(.gantt_layout_content .gantt_task_vscroll) {
&::-webkit-scrollbar {
width: 14px;
height: 14px;
}
&::-webkit-scrollbar-thumb {
background-color: #345a75;
border-radius: 10px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
}

最后，记录一种常见的报错，因不对element组件设置固定宽高而导致的视图大小变动弹出的计算错误

ResizeObserver loop completed with undelivered notifications.

解决办法是将下列代码放置在引用该页面的父组件中，习惯放在js最后一行：

const debounce = (fn, delay) => {
let timer = null;
return function () {
let context = this;
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
}
}
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
constructor(callback) {
callback = debounce(callback, 16);
super(callback);
}
}