element-ui表格组件(el-table)滚动条样式设置

大致思路

• 通过css设置滚动条的样式
  • 但是这一过程会出现问题
  • 假如滚动条设置过宽(默认是8px)会遇到固定列会出现遮挡滚动条
  • 那么解决思路比较直接的做法就是通过js去调整固定列的大小以及定位

    // 模板部分
    <el-table class="custom-table" border style="width: 100%" height="250" ref="tableRef">
    </el-table>
    // css
    .custom-table .el-table__body-wrapper::-webkit-scrollbar,
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      width: 20px; //垂直方向
      height: 20px; //水平方向
    }
    // js
    const el = this.$refs.tableRef.$el
    const fixedLeft = el.querySelector('.el-table__fixed')
    const fixedRight = el.querySelector('.el-table__fixed-right')
    const fixedHeight = el.getBoundingClientRect().height - 20 - 2 + 'px'
    fixedLeft.style.height = fixedRight.style.height = fixedHeight
    fixedRight.style.right = '20px'
    // 重新设置布局。其实也可以不需要
    this.$refs.tableRef.doLayout()
  

  • 通过设置element-ui.scss编译文件直接修改样式。该方案最直接有效

  // element-ui.scss
    .team-workreport-management-table.el-table .el-scrollbar__wrap::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }
    .team-workreport-management-table.el-table .el-table__body-wrapper {
      &::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #fff;
      }
      &::-webkit-scrollbar {
        width: 12px !important;
        height: 12px !important;
        background-color: #c5c5c5;
      }
      &::-webkit-scrollbar-thumb {
        width: 12px;
        height: 12px;
        border-radius: 4px;
        background-color: rgba(144, 147, 153, .3);
      }
    }
  // .vue
    .team-workreport-management-table {
      .el-table__fixed {
        bottom: 12px !important;
      }
      .el-table__fixed-right {
        right: 12px !important;
        bottom: 12px !important;
      }
      .el-table__fixed-right-patch {
        width: 12px !important;
      }
      .is-scrolling-none ~ .el-table__fixed {
        bottom: 0 !important;
      }
      .is-scrolling-none ~ .el-table__fixed-right {
        right: 12px !important;
        bottom: 0 !important;
      }
      .is-scrolling-none ~ .el-table__fixed-right-patch {
        width: 12px !important;
      }
    }