el-table 添加右固定列、横向滚动条、竖向滚动条

汪叽在羡

已于 2024-03-12 09:02:18 修改

阅读量2.2k

点赞数 3

文章标签： vue.js javascript 前端

于 2024-03-11 09:54:12 首次发布

本文链接：https://blog.youkuaiyun.com/day_z/article/details/136615465

版权

el-table在固定列，并且添加滚动条后，可能会出现各种各样的样式错乱问题，比如竖向滚动时固定列不滚动，又或者固定列高度少一截等问题。

以下代码可以放在全局scss文件，除此之外还要在el-table标签上添加max-height="多少px"

.el-table__fixed-right {
  height: 100% !important;
  right: 0 !important;
}
.el-table__fixed::before,
.el-table__fixed-right::before {
  background: transparent !important;
}

.el-table__body-wrapper {
  max-height: 520px;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    border-radius: 7px;
    width: 7px;
    height: 7px;
    background: #ffffff;
  }
  &::-webkit-scrollbar-thumb {
    background: #1890ff;
    border-radius: 7px;
  }
  .gutter {
    width: 10px !important;
  }
}

固定列添加样式：

  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  justify-content: center !important;
.el-button--mini {
    padding: 7px 10px 5px 10px;
    width: 60px;
  }