1、侧边栏自定义样式
<style lang="less">
//"∨" 侧边栏展开的时候,一直显示
.el-icon-arrow-down:before {
content: "\e6df"!important;
}
// 侧边栏收缩时候文本和 ">" 隐藏
// 隐藏 标题
.el-menu--collapse .el-submenu__title span{
display: none!important;
}
// 隐藏 >
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow{
display: none;
}
<style>
<style lang="less" scoped>
//侧边栏标题吸顶效果
.fix{
position: fixed;
top: 0;
z-index: 88;
}
//一级标题-默认背景色
.el-submenu {
background-color: #F4F5F7 !important;
}
//二级标题-默认背景色
.el-menu .el-menu-item-group {
background-color: #F4F5F7;
}
//二级某项被选中-一级背景色
.el-submenu.is-active.is-opened {
background-color: #EFF0F2 !important;
}
//二级某项被选中-二级背景色
.el-submenu.is-active.is-opened .el-menu-item-group[data-v-a28ad4e6] {
background-color: #EFF0F2 !important;
}
//二级某项被选中-被选中项背景色
.el-menu-item.is-active {
padding-left: 0px !important;
margin-left: 10px;
font-family: SourceHanSansCN-Medium;
font-size: 14px !important;
color: #000000 !important;
background-color: #E7E9ED !important;
border-radius: 10px;
width: 180px;
}
//可以设置before页签样式
.el-menu-item.is-active::before {
content: "";
border: #4F9884 solid 2px;
transform: translate(-50%, -50%);
width: 3px;
height: 10px;
}
//每一项的样式设置
.el-submenu .el-menu-item {
padding-left: 0px!important;
height: 40px;
line-height: 40px;
padding: 0;
min-width: 0;
}
.el-menu-item:hover{
background-color:#EFF0F2 !important;
}
<style>
2、下拉框选择内容样式修改
<el-select @change="$forceUpdate()" popper-class="eloption" :popper-append-to-body="true" v-model="type.styleName" placeholder="请选择颜色" clearable>
<template slot="prefix">
<span v-if="type.styleName" :class="type.styleName=='绿色'?'color-tag':
type.styleName=='黄色'?'color-tag tag1':
type.styleName=='蓝色'?'color-tag tag2':''">文字</span>
</template>
<!-- <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name">
<span class="color-tag tag1">文字</span>
<span style="margin-left:10px;">{
{item.name}}</span>
</el-option> -->
<el-option label="绿色" value="绿色" />
<el-option label="黄色" value="黄色" />
<el-option label="蓝色" value="蓝色" />
</el-select>
css:
<style lang="less" scoped>
// 下拉框左侧颜色文字
/deep/.el-input__prefix {
height: 34px!important;
line-height: 34px!important;
}
/deep/.el-input--prefix .el-input__inner {
padding-left: 45px!important;
}
.color-tag{
padding: 4px;
width: 28px;
height: 14px;
font-family: SourceHanSansCN-Medium;
font-weight: 500;
font-size: 14px;
color: #086D00;
letter-spacing: 0;
background-color: #CCF7B5;
border-radius: 4px;
}
.tag1{
color: #EC7C0E;
background-color: #FBE9B3;
}
.tag2{
color: #0383C3;
background-color: #C3EBFF;
}
<style>
3、其他
(1)下拉框显示不全
添加:popper-class=“eloption” :popper-append-to-body=“true”
并编写css
<el-select popper-class="eloption" :popper-append-to-body="true" v-model="name" placeholder="请选择" clearable>
<el-option v-for="(item, index) in allData" :key="item.id" :label="item.name" :value="item.name" />
</el-select>
(2) 表格背景颜色修改,添加class类,并编写css
<el-table class="table-bg">
</el-table>
(3) input type=“number” 去掉右边的上下箭头,鼠标滚动禁止数字加减,并编写css
由于,键盘上下键依旧可以控制数字加减,各版本浏览器不兼容,依旧可以导致鼠标滚动数字加减,建议使用正则表达式和type="text"来控制输入内容
<!-- @mousewheel.native.prevent----父子组件传递,用native-->
<input type="number" @mousewheel.prevent @DOMMouseScroll.prevent v-model="num" placeholder="请输入数字">
(4) 日历修改图标,见css
css:
<style lang="less">
Page {
background-color: #F4F5F7;
}
*{
margin: 0;
padding: 0;
}
//表格分页
.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #4F9884;
border-radius: 6px;
}
// 删除弹窗
.el-button--small {
width: 80px;
}
.el-button--small:hover {
color: #4F9884 !important;
background-color: #fff;
border-color: #DCDFE6;
}
.el-button--primary {
width: 80px;
background-color: #4F9884 !important;
border-color: #4F9884 !important;
}
.el-button--primary:hover {
color: #FFF !important;
background-color: #4F9884;
border-color: #4F9884;
}
/* textarea */
.el-textarea__inner {
background: #FBFBFC;
border: 0.5px solid #DCE1E7;
border-radius: 4px;
font-family: SourceHanSansCN-Regular;
font-size: 14px;
padding-left: 10px;
color: #1E2739;
&::placeholder {
color: #8F949B;
}
}
// 日历格式
.el-date-picker__time-header{
width:322px;
}
// 只能输入数字,去掉输入框右边加减
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
/* table背景色 */
/deep/.table-bg tr{
background-color: #fff;
}
/* 表格筛选 */
.el-table__column-filter-trigger{
display:none;
}
.el-icon-arrow-down:before {
content: '';
}
.el-table-filter {
width: 130px;
}
.el-table th.el-table__cell>.cell {
height: 25px;
}
.el-table-filter__list-item.is-active {
font-family: SourceHanSansCN-Regular;
font-size: 14px;
color: #1E2739;
margin: 4px;
background-color: #F6F6F6;
border-radius: 4px;
}
.el-table-filter__list-item:hover {
font-family: SourceHanSansCN-Regular;
font-size: 14px;
color: #1E2739;
margin: 4px;
background-color: #F6F6F6;
border-radius: 4px;
}
.el-table-filter__list-item {
line-height: 30px;
}
.el-table-filter__list {
padding: 0;
}
.el-table th.el-table__cell>.cell.highlight {
color: #4F9884;
}
// 下拉框显示不全
.eloption .el-select-dropdown__wrap {
margin-bottom: 0 !important;
}
/* 下拉框箭头 */
.el-input__icon {
line-height: 34px;
}
.el-input--suffix .el-input__inner {
padding-left: 10px;
}
.el-input__inner {
height: 34px;
background: #FBFBFC;
border: 0.5px solid #DCE1E7;
border-radius: 4px;
font-family: SourceHanSansCN-Regular;
font-size: 14px;
color: #1E2739;
&::placeholder {
color: #8F949B;
}
}
/* 时间选择图标修改 */
.el-icon-time {
background: url('@/assets/images/icon_calendar.png') center center no-repeat;
background-size: 14px;
}
.el-icon-time:before {
content: "";
}
.el-input__prefix {
width: 25px;
position: absolute;
left: 85% !important;
}
.el-input--prefix .el-input__inner {
padding-left: 10px;
}
.el-input--suffix .el-input__inner {
padding-left: 10px;
}
/* 高度控制 */
.body {
height: calc(100vh - 120px);
}
/* 滚动条 */
.body {
height: 100vh;
overflow: hidden;// 超出部分隐藏
overflow-y: scroll; // 设置y轴方向的滚动条
}
aside {
width: 0px;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
</style>