element ui中table列表内容部分滚动

原创于 2023-02-01 09:53:06 发布

· 906 阅读

0 ·

版权

文章标签：

#vue.js #elementui

ElementUi 专栏收录该内容

3 篇文章

订阅专栏

当在ElementUI的表格中设置固定列时，可能会遇到内容滚动与固定列不同步的问题。解决这个问题的方法是通过CSS设置最大高度并调整定位，确保固定列和内容区域的滚动一致。可以使用全局或单页的SASS样式，隐藏滚动条，并为固定右列设置适当的右边距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在element ui的table表格中如果设置了固定列，那么在内容部分滚动的时候会出现内容和固定列不一起滚动的情况，解决方法就是设置样式让固定列和内容区域的最大高度相同，为了样式好看，让固定列定位离右边有点距离，样式设置为全局样式，如果只是某个页面需要，那么用deep穿透即可，样式代码如下：

/*sass全局样式写法，单个页面使用前面加/deep/*/
.el-table__fixed-body-wrapper {
    max-height: 675px !important;
    overflow-y: scroll !important;

    &::-webkit-scrollbar {
      display: none;
    }
  }
  .el-table__body-wrapper,.is-scrolling-left {
    max-height: 675px !important;
    overflow-y: scroll !important;
  }
  .el-table__fixed-right {
    right: 7px !important;
  }