vue+element美化table样式+美化浏览器滚动条样式（兼容IE）+隐藏滚动条样式（兼容IE）

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

.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;

}