一、el-table的滚动条加粗并解决遮挡内容问题
近期接到产品提的需求，反馈用户说table里面的滚动条过小，不方便拖动，希望加粗，然后我就研究了下如何加粗，发现加粗后会导致遮挡内容的问题，并予以解决。以下是实现和解决的方法和步骤。
先看看官网的滚动条样式
实现后的项目中样式，我的条数是200行，滚动条加粗并显示在内容底部。
第一步，让滚动条常态显示，划入显示不要了。在el-table上增加属性scrollbar-always-on
第二步，改变滚动调样式，加粗。从F12不难看出，它是自己写的横向和纵向滚动条。
那么改变这个节点的样式，还有纵向滚动条样式
/滚动条加粗
.el-scrollbar .el-scrollbar__bar.is-vertical {
width: 14px;
top: 2px;
border-radius: 10px;
}
.el-scrollbar .el-scrollbar__bar>div {
opacity: 0.6;
}
.el-scrollbar .el-scrollbar__bar.is-horizontal {
height: 14px;
left: 2px;
border-radius: 10px;
bottom: 0px;
}第三步，解决遮挡问题。第二步完成后发现内容最后一行会被遮挡，那么如何解决呢
先说理论，原先想着能加padding往下撑，发现内容就会更加遮挡，放弃该方法。再想到滚动条定位往下，发现父元素overflow:hidden,放弃该方法。最后试验得出只能修改内容的高度。上代码。
//解决滚动条遮挡内容
.el-scrollbar__view .el-scrollbar__wrap {
overflow: auto;
height: calc(100% - 14px) !important;
}以上就是如何使el-table的滚动条加粗，并解决遮挡问题的方法，其中有一个很重要的点是el-table一定要固定高度，100%或者固定值比如500px都行，如果有其他的问题，也可以发私信交流。