Element:
给表格整体设置斑马纹
在main.js中
ElementUI.Table.props.stripe = {type: Boolean,default: true
}
在element-ui.scss中
// // 为所有 el-table 设置默认斑马纹
// .el-table {
// &.el-table--enable-row-hover .el-table__body tr:hover > td {
// background-color: pink !important;
// }// &.el-table--striped .el-table__body tr.el-table__row--striped td {
// background-color: pink;
// }
// }
整体修改button的主题色
在element-ui.scss中
// 定义主题色变量
:root {--primary-color: #52B7F5;--primary-hover-color: #52B7F5;--primary-active-color: #52B7F5;
}// 应用到 el-button primary
.el-button--primary {background-color: var(--primary-color);border-color: var(--primary-color);&:hover, &:focus {background-color: var(--primary-hover-color);border-color: var(--primary-hover-color);}&:active {background-color: var(--primary-active-color);border-color: var(--primary-active-color);}
}
整体修改表单样式(以修改聚焦边框为示例)
在在element-ui.scss中
//输入框的聚焦样式
.el-input__inner:focus {border-color: red;
}
//日期选择器的聚焦样式
.el-range-editor.is-active, .el-range-editor.is-active:hover {border-color: red;
}
//select选择器聚焦样式
.el-select .el-input.is-focus .el-input__inner {border-color: red;
}