vue element-ui样式部分踩坑总结

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>