解决el-table设置了固定列导致的滚动条无法拖动问题

Posted 2020-12-07 yanggb

el-table中的el-table-column提供了一个fixed属性设置固定列，但是设置了之后发现表格的滚动条无法拖动了，通过F12定位到页面元素发现是滚动条被固定列生成的元素给覆盖了，于是想办法通过修改样式的方式解决问题。

<style lang="scss" scoped>
  .el-table {
    .el-table__fixed { // 左固定列
      height: auto !important;
      bottom: 18px; // 改为自动高度后，设置与父容器的底部距离，高度会动态改变，值可以设置比滚动条的高度稍微大一些
    }
    .el-table__fixed-right { // 右固定列
      height: auto !important;
      bottom: 18px; // 改为自动高度后，设置与父容器的底部距离，高度会动态改变，值可以设置比滚动条的高度稍微大一些
    }
  }
</style>

当然也可以把这段样式放到全局的样式表中，作为全局的样式，这样就不需要每个页面都写这段样式了（推荐）。

这个问题不知道是官方的bug还是重写样式引起的冲突问题，也不追究了，能解决问题就好了。

 

"偶尔志得意满，偶尔消沉低落。"