vue3-elementPlus部分组件样式修改

目录el-dropdownel-inputel-selectel-tabsel-radioel-checkboxel-textareael-date-pickerel-table改变某一列的背景颜色隐藏勾选按钮最上面的全选el-pagination页码组件LoadingElMessageBoxInputTagel-upload前提在less语言下使用/deep/在sass语言下使用 ::v-deep 替换 /deep/但::v-deep的写法已经废弃建议使用:deep(css选择器)elementUI样式修改vue2-elementUI部分组件样式修改_vue2 圆圈选中样式-CSDN博客el-button鼠标悬浮时按钮颜色修改:deep(.el-button:hover) { background-color: #f3ead9; /* 例如#409EFF */ border-color: #b39a6c; /* 例如#409EFF */ color: #584421; /* 根据需要改变文字颜色 */ }el-dropdown//下拉框中文字颜色 :deep(.el-dropdown-menu__item:not(.is-disabled):focus) { background-color: #f5f5f5; color: #A88D5B; } :deep(.el-dropdown-menu__item:hover){ background-color: #f5f5f5; color: #A88D5B; /* 设置文字颜色 */ } //去除下拉框边框 :deep(.el-tooltip__trigger:focus-visible) { outline: unset; }el-input//改变输入框聚焦时边框颜色 .el-input { --el-input-focus-border-color: #88733c; }如果是文本域//改变文本域聚焦时边框颜色 .el-textarea{ --el-input-focus-border-color: #88733c; } //设置高度 .el-textarea__inner { height: calc((100vh - 550px) / 2); /* 设置固定高度为100px */ }el-select//选中时下拉框边框颜色 :deep(.el-select__wrapper.is-focused){ box-shadow: 0 0 0 1px #88733c inset !important; } //下拉框选中颜色 .el-select-dropdown__item.is-selected { color: #a88d5b; }el-tabs//标签页选中时文字颜色 :deep(.el-tabs__item.is-active) { color: #a88d5b !important; } //标签页鼠标悬浮时文字颜色 :deep(.el-tabs__item:hover) { color: #a88d5b !important; //悬浮 }高度固定//高度固定 .el-tab-pane { height: calc(100vh - 380px); }el-radio//单选框字体颜色 :deep(.el-radio__input.is-checked .el-radio__label) { color: #88733c !important; } //单选框边框背景颜色 :deep(.el-radio__input.is-checked .el-radio__inner) { background: #88733c !important; border-color: #88733c !important; } //单选框悬浮时边框的颜色 .el-radio { --el-radio-input-border-color-hover: #a88d5b; }//鼠标悬浮时字体的颜色 :deep(.el-radio-button__inner:hover) { color: #a88d5b; /* 例如: #409EFF */ } :deep(.el-radio-button.is-active .el-radio-button__inner:hover) { color: #fff; }el-checkbox/* 选中后的字体颜色 */ :deep .el-checkbox__input.is-checked.el-checkbox__label { color: #7e6934 !important; } /* 选中后圆圈的背景颜色 */ :deep .el-checkbox__input.is-checked .el-checkbox__inner { background: #7e6934 !important; border-color: #7e6934 !important; }el-textarea.el-textarea{ --el-input-focus-border-color:#7e6934;//修改选中时的边框颜色 }el-date-picker//时间选择某一天选中时边框颜色 :deep(.el-input__wrapper.is-focus){ box-shadow: 0 0 0 1px #88733c inset !important; } //选择年份月份时输入框边框的颜色 :deep(.el-date-editor.is-focus .el-input__wrapper) { box-shadow: 0 0 0 1px #88733c inset !important; } //时间选择一段时间选中时边框颜色 :deep(.el-range-editor.is-active) { box-shadow: 0 0 0 1px #88733c inset !important; }因el-date-picker 是将下拉框直接挂载到页面的中而非自身元素下若想要修改日期下拉框里的内容样式需要在组件上设置是否将 date-picker 的下拉列表插入至 body 元素:teleportedfalseel-date-picker v-modeldata1 typedate placeholder请选择数据日期 :sizesize :teleportedfalse /选择某一天的时间选择框样式 //当天日期字体颜色(除去单个日期选中时和一段时间开头和结尾选中时) :deep(.el-date-table td.today:not(.current):not(.start-date):not(.end-date) .el-date-table-cell__text) { color: #88733c !important; } //选中的日期颜色 :deep(.el-date-table td.current:not(.disabled) .el-date-table-cell__text) { background-color: #88733c !important; } //鼠标悬浮经过日期时颜色 :deep(.el-date-table td:hover){ color: #88733c !important; } //上方中间文本鼠标悬浮时颜色 :deep(.el-date-picker__header-label:hover){ color: #88733c !important; } //当前年份的颜色 :deep(.el-year-table td.today .el-date-table-cell__text) { color: #88733c !important; } //选中年份的颜色 :deep(.el-year-table td.current:not(.disabled) .el-date-table-cell__text) { color: white !important; background-color: #88733c !important; } //鼠标悬浮经过年份时颜色 :deep(.el-year-table td:not(.current) .el-date-table-cell__text:hover){ color: #88733c !important; } //当前月份的颜色除去选中时的 :deep(.el-month-table td.today:not(.current) .el-date-table-cell__text) { color: #88733c !important; } //选中月份的颜色 :deep(.el-month-table td.current:not(.disabled) .el-date-table-cell__text) { color: #88733c !important; } //鼠标悬浮经过月份时颜色 :deep(.el-month-table td:not(.current) .el-date-table-cell__text:hover){ color: #88733c !important; } //上方左右跳转按钮悬浮时颜色调整 :deep(.el-picker-panel__icon-btn:hover){ color: #88733c !important; }选择某一段时间的时间选择框样式 //一段时间的开始日期背景颜色 :deep(.el-date-table td.start-date .el-date-table-cell__text) { background-color: #88733c !important; color: #fff !important; } //一段时间的结束日期背景颜色 :deep(.el-date-table td.end-date .el-date-table-cell__text) { background-color: #88733c !important; color: #fff !important; } //中间时间段背景颜色 :deep(.el-date-table td.in-range .el-date-table-cell) { background-color: #e3ddd0 !important; } //一段时间选择器上方中间文本鼠标悬浮时颜色 :deep(.el-date-range-picker__header-label:hover){ color: #88733c !important; }年份选择器和月份选择器联动并且月份选择器只显示所选择的月份const year ref() const month ref() const handleYearChange (value) { // 年份选择器选择后把年份赋值给月份选择器 const newDate new Date(month.value) // 复制当前日期对象 newDate.setFullYear(value.getFullYear()) // 设置新的年份 month.value newDate } const handleMonthChange (value) { // 月份选择器选择后把年份赋值给年份选择器 year.value String(value.getFullYear()) } el-form-item label年份 el-date-picker v-modelyear typeyear :teleportedfalse changehandleYearChange / /el-form-item el-form-item label月份 el-date-picker v-modelmonth typemonth :teleportedfalse formatMM changehandleMonthChange / /el-form-itemel-table//表格中选择框背景色 :deep(.el-checkbox) { --el-checkbox-checked-bg-color: #a88d5b; } //表格中选择框鼠标悬浮时颜色 :deep(.el-checkbox__input .el-checkbox__inner:hover) { border-color: #a88d5b !important; } //表格中选择框选中时颜色 :deep(.el-checkbox__input.is-checked .el-checkbox__inner) { border-color: #a88d5b; }改变某一列的背景颜色首先在el-table上添加:cell-styletableCellStyle属性el-table :cell-styletableCellStyle/el-table然后在script中自定义方法// 改变某一列单元格背景颜色 const colCellStyle (obj) { if (obj.columnIndex 5) { return { background-color: RGB(245,245,245) };// 把序列号为5的那一列改为灰色 } };隐藏勾选按钮最上面的全选//隐藏表格最上面的全选勾选框 :deep(.el-table__header-wrapper) { .el-checkbox__inner { display: none !important; } }改变表格排序按钮选中时的颜色//表格排序按钮选中时的颜色修改 :deep(.el-table .descending .sort-caret.descending) { border-top-color: #88733c; } :deep(.el-table .ascending .sort-caret.ascending) { border-bottom-color: #88733c; }el-pagination页码组件/* 修改页条数下拉框选中时边框的颜色 */ :deep(.el-select__wrapper.is-focused){ box-shadow: 0 0 0 1px #88733c inset !important; } /* 修改页条数下拉框选中选项的字体颜色 */ :deep(.el-select-dropdown__item.is-selected){ color: #88733c !important; } /* 修改当前页码的颜色 */ :deep(.el-pagination .el-pager li) { color: #88733c; } /* 鼠标悬停在页码组件左右跳转按钮的字体颜色 */ :deep(.el-pagination .btn-prev),:deep(.el-pagination .btn-next) { :hover { color: #88733c; } }页码组件里需要添加:teleportedfalseLoading修改加载图标的颜色//修改加载图标的颜色 :deep(.el-loading-spinner .path){ stroke: #AB8E66; }ElMessageBoxElMessageBox.alert( 请邮件反馈问题, 提示, { confirmButtonText: ok, type: warning, confirmButtonClass: ExitConfirmButton } ) style langscss //style中不能加入scoped否则样式不生效 //!important 优先使用 .ExitConfirmButton { background: #a88d5b !important; border-color: #a88d5b !important; } /style尤其注意注释的内容// Dialog右上角关闭图标悬停样式 .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close { color: #7e6934 !important; } // MessageBox右上角关闭图标悬停样式 .el-message-box__headerbtn:focus .el-message-box__close, .el-message-box__headerbtn:hover .el-message-box__close { color: #7e6934 !important; }ElMessageBox.confirm(你确认要进行退出么, 温馨提示, { type: warning, confirmButtonText: 确认, cancelButtonText: 取消, confirmButtonClass: ExitConfirmButton, cancelButtonClass: ExitCancelButton }) style .ExitConfirmButton { background: #a88d5b !important; border-color: #a88d5b !important; outline-color: #ddceb3 !important;/* 边缘有一层框的颜色*/ } .ExitCancelButton { :hover { border-color: #a88d5b !important; background: #a88d5b !important; color: #fff; } } /* 不知道为什么设置了全局初次打开时依然显示蓝色所以写了这个再次覆盖 el-dialog也同样*/ .el-message-box__headerbtn:focus .el-message-box__close, .el-message-box__headerbtn:hover .el-message-box__close { color: #7e6934 !important; } /styleInputTag//改变标签输入框焦时边框颜色 .el-input-tag.is-focused { box-shadow:0 0 0 1px #88733c; }el-upload//修改文件上传组件的边框 :deep(.el-upload .el-upload-dragger:hover) { border-color: #88733c !important; } :deep(.el-upload .el-upload-dragger) { border-color: var(--el-border-color) !important; } //修改文件上传组件提示文字的高光颜色 :deep(.el-upload-dragger .el-upload__text em ){ color: #88733c; } //修改文件上传组件删除提示语的颜色 :deep(.el-icon--close-tip) { color: #7e6934 !important; } //修改文件上传组件文件列表访问时的字体颜色 :deep(.el-upload-list__item-name:hover){ color: #7e6934 !important; } //修改文件上传组件文件列表删除图标访问时的颜色 :deep(.el-icon--close) { :hover { color: #7e6934 ; } }el-segmented//Segmented分段控制器选中项的颜色背景色 .el-segmented { --el-segmented-item-selected-color:#fff; --el-segmented-item-selected-bg-color: #88733c; }el-switch//switch开关样式控制 :deep(.el-switch.is-checked .el-switch__core) { background-color: #88733c; border-color: #88733c; } :deep(.el-switch__label.is-active) { color: #88733c; } :deep(.el-switch__label) { color: gray; }el-form行内表单让空间紧凑一点.el-form-item { margin-right: 20px; }el-badge//徽章红点的大小 :deep(.el-badge__content.is-fixed.is-dot) { width: 12px; /* 设置宽度 */ height: 12px; /* 设置高度 */ }