elemenUI---改变部分组件样式：如 表格操作＞鼠标移入高亮当前行、选中当前行样式改变，数字输入框，滚动条等_鼠标移动高亮组件

记录elementUI部分插件样式改变方式：
一、表格插件样式

• 表格> 选中当前行样式

.el-table__body tr.current-row>td {
  color: red;
  font-weight: bold;
  background: #fad0c3 !important;
}
1
2
3
4
5

• 表格> 鼠标移入高亮当前行样式

.el-table--enable-row-hover .el-table__body tr:hover>td{
  color: red;
  font-weight: bold;
  background: #fcede8 !important;
}
1
2
3
4
5

二、输入框样式

• 去掉数字输入框箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input[type="number"] {
  -moz-appearance: textfield !important;
}
1
2
3
4
5
6
7

• input type=number时，禁止鼠标滚轮改变数字（input 标签内加**@mousewheel.native.prevent @DOMMouseScroll.native.prevent** ），
  限制输入内容（oninput里加判断）

<el-input type="number" placeholder="请输入" v-model.number="branchCompanyBidFormData.secondHandMoney" size="medium" clearable oninput="if(value>10000000) value=10000000;if(value<0) value=0;" @mousewheel.native.prevent @DOMMouseScroll.native.prevent />
1

三、滚动条
// 全局配置 隐藏滚动条

::-webkit-scrollbar {
  display: none;
  scrollbar-width: none; /* firefox */
 -ms-overflow-style: none; /* IE 10+ */
}
1
2
3
4
5

// 全局配置隐藏滚动条后，想要局部显示滚动条

::-webkit-scrollbar {
    display: block !important;
    height: 10px;
    background-color: rgba(0,0,0,0.3);
  }
/*定义滚动条轨道：内阴影+圆角*/
  ::-webkit-scrollbar-track
  {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }
  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb
  {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #bbbbbb;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19