修改 ElementUI table 组件的滚动条高度

ElementUI 的 table 组件包含很多实用的功能,其中就包含fixed属性来固定某几列内容,使之不随滚动条滚动。但是它自带的滚动条高度只有 6px,可能某些时候并不便于用户点击拖拉。

如果我们手动改了滚动条高度,就会发现fixed的那一列会有一部分盖在了滚动条上,十分的不美观。

.el-table {
  ::-webkit-scrollbar {
    //整个滚动条
    height: 10px;
    /* 横向滚动条 高度 */
  }

  ::-webkit-scrollbar-thumb {
    // 滚动条上的滚动滑块
    // background: #000 !important;
    height: 10px;
  }
}

2

这时候需要让fixed的列在滚动条出现的时候适应我们自定义的滚动条样式

.el-table--scrollable-x {
  .el-table__fixed {
    bottom: 10px !important;
  }

  .el-table__fixed-right {
    bottom: 10px !important;
  }
}

1