element-ui的表格滚动条，如何默认隐藏，hover时出现？

Question

目前设置了一些样式，不知道是不是在这些类上操作？

.el-table__body-wrapper::-webkit-scrollbar {
    width: 4PX;
    height: 4PX;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 2px;
    height: 50px;
    background:#6179da;
}

.el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.4);
}
.el-table__body-wrapper {
    background: #1F233D;
}

Answer 1

第一种方法：

.el-table--scrollable-y .el-table__body-wrapper {
    overflow-y: hidden;
}
.el-table--scrollable-y .el-table__body-wrapper:hover {
    overflow-y: auto;
}

---

第二种方法：

.el-table--scrollable-y .el-table__body-wrapper {
    padding-right: 20px;
}
.el-table--scrollable-y .el-table__body-wrapper:hover {
    padding-right: 0;
}

---

第三种方法：
使用el-scrollbar组件，这也是官网在使用的，但是可能要啃下源码，再就是表头可能也会一起滚动，需要控制下样式。

---

推荐使用第一种，简单粗暴。