1、/* 解决表格错位问题(表格数据过多会出现滚动条,当筛选后数据过少,没滚动条时会发生错位)*/

方式一:
.el-table th.gutter,
.el-table colgroup.gutter{
display: table-cell!important;
}
/解决表格错位问题end/
方式二:
// 解决表格错位问题(火狐浏览器)
.ai-table–border th.gutter:last-of-type {
display: block!important;
width: 17px!important;
}
方式三:
qtable为表格上ref,在请求到表格数据赋值之后,进行执行下面代码

 this.$nextTick(() => {
     this.$refs.qtable.doLayout();
});

2、/* 表格表头根据单词换行样式 */

.el-table th>.cell{
word-break: break-word;
}
/* 表头单词换行end*/

3、/滚动条 begin/

*(通配符选择器) {
scrollbar-face-color: #cccccc;
/面子/
scrollbar-arrow-color: #fff;
/箭头/
scrollbar-3dlight-color: #ccc;
/最外左/
scrollbar-highlight-color: #ccc;
/左二/
scrollbar-shadow-color: #ccc;
/右二/
scrollbar-darkshadow-color: #ccc;
/右一/
scrollbar-track-color: #eeeeee;
/滑道/
}
::-webkit-scrollbar {
width: 6px;
height: 10px;
}
/滚动条宽度/
/滚动条按钮/
/滑道全部/
::-webkit-scrollbar-track-piece {
background-color: #fff0 ;
/滑道/
-webkit-border-radius: 0;
/滑道圆角宽度/
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
/滑动条表面/
border: solid 2px #ccc;
/滑动条边框/
border-radius: 7px;
/滑动条圆角宽度/
}
/横竖滚动条交角/
::-webkit-scrollbar-corner {
background-color: none;
}
/横竖滚动条交角图案/
::-webkit-resizer {
background-repeat: no-repeat;
background-position: bottom right;
}
/鼠标滑过滑动条/
::-webkit-scrollbar-thumb:hover {
background-color: #bbb;
border: solid 2px #bbb;
/滑动条边框/
}
/滚动条 end/

4、// 解决<el-input-number光标输入中文后光标上移的问题

.el-input__inner{
line-height: 1px !important;
}

Logo

前往低代码交流专区

更多推荐