浅谈自定义el-table的滚动条样式，各种踩坑_el-table 滚动条样式

需求

        因为el-table的默认滚动条样式太窄了，为增强用户体验，以及老板要求，只能尝试把滚动条样式加宽。

        前面就不过多废话了，直接上效果和样式，详细过程放最后。

效果

原效果

新效果

代码实现

        因为我要全局改变表格的样式，所以我是在全局自定义的elment-ui.scss做的修改，代码如下：

/* 自定义滚动条样式 */
.el-table__body-wrapper::-webkit-scrollbar {
  // 表格右侧滚动
  width: 10px !important;
  // 表格下方滚动
  height: 10px !important;
}
 
/** 设置表格内设的滚动条宽度，适应动态计算 */
.el-table__body-wrapper, .el-scrollbar__wrap {
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
}

其中第一个样式设置了表格最后一列没有使用fixed固定的情况。

第二个样式适配了使用fixed固定表格列的情况。

如果想修改顶部那个小块的颜色，比如与header背景色保持一致，可以在这里设置。

.el-table__fixed-right-patch{
  background-color: #4472c4 !important;
}

过程

检索网页的元素不难发现，当我们使用fixed固定表格列时，最后一列是一个独立出来的容器，所以对el-table__body-wrapper设置的滚动条样式并不会对其生效。

所以我们需要单独设置这个容器中的滚动条样式。

最开始我直接尝试修改element.style中的right，以及侧边滚动条的width，可这样就会导致不管有没有滚动条，都会保留预设的这个宽度。

然后就发现这个right和width是el-table动态计算赋予的，使用important强制生效后，就会导致它原有的计算不生效。

于是我又继续搜索，看别人是如何解决这个问题的，最终发现`逝流水1234`这位博主，通过查看elment-ui源码的形式，找到了el-table动态计算属性的原理，最后修改就完成了对fixed固定列的适应。