表格样式-公共样式里加: 

.el-table__body-wrapper::-webkit-scrollbar {

  width: 6px; 

  height: 6px; 

}
.el-table__body-wrapper::-webkit-scrollbar-thumb {

  background-color: #ddd;

  border-radius: 3px;

}

公共浏览器样式 :
 

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #d5d5d5;
  border-radius: 5px;
}

隐藏滚动条-可以鼠标滚动(兼容版):

 

其中通过其他途径计算出了滚动条的宽度是17px,而且用calc这个方法来计算多出来的滚动条宽度,而父级元素的overflow:hidden;

此时就起作用了,这种做法兼容各个浏览器

.el-card__body{
    height:100%;
    overflow-y: scroll;
    width: -webkit-calc(100% + 17px);
    width: -moz-calc(100% + 17px);
    width: calc(100% + 17px);
}

vue 鼠标移上去显示滚动条,鼠标离开消失:

jq:

$().hover(function(){
    $().css("overflow","auto")
},function(){
    $().css("overflow","hidden")
})

 element有一个隐藏组件:

<el-scrollbar style="height:100%;">

内容

</el-scrollbar>

element tree加滚动条时注意:

.el-tree>.el-tree-node{

min-width: 100%;

display:inline-block;

}

 

Logo

前往低代码交流专区

更多推荐