一、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都行，如果有其他的问题，也可以发私信交流。