解决element UI中el_table的合计栏在滚动条下方问题

最新推荐文章于 2024-11-08 15:57:59 发布

原创最新推荐文章于 2024-11-08 15:57:59 发布 · 5.5k 阅读

25 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

本文档介绍了在使用Element UI时遇到的一个问题：el_table的合计栏出现在横向滚动条下方。通过分析原因，发现滚动条是表内容的滚动条，而非整个table的。解决方案是将表头、内容、表尾的滚动条设为可见，并在外层添加一个div，设置该div的滚动条显示，从而成功解决了合计行显示在滚动条下方的问题。

最近做项目，公司要求在表格中加入“合计”行。查看element文档后使用自定义方法进行添加。添加后页面中，合计行在横向滚动条下方。
在这里插入图片描述
导致出现这个问题的原因是：此时的滚动条是表内容的滚动条。而合计行是属于表尾。

解决方法：
这里要的滚动条是整个table的滚动条，所以将表头、表内容、表尾的滚动条设为visible。我在el_table外包裹了一个div，将该div的滚动条显示。
在这里插入图片描述

<style>
.itemTrading .el-table{
  overflow: auto;
}
.itemTrading  .el-table__body-wrapper,
.itemTrading  .el-table__header-wrapper,
.itemTrading  .el-table__footer-wrapper {
  overflow: visible;
}
.itemTrading  .el-table::after {
  position: relative !important;
}
//这里根据自己的项目查看是否需要添加。
//我的页面样式需要将此处的滚动条也进行隐藏。
.body-theme-grenn .el-table--scrollable-x .el-table__body-wrapper{
  overflow: visible;
}
</style>

问题解决。
在这里插入图片描述