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;
}