table固定列横向滚动_解决elementui合计行在滚动条下方的问题

最新推荐文章于 2024-08-14 10:47:25 发布

weixin_39706861

最新推荐文章于 2024-08-14 10:47:25 发布

阅读量1.8k

点赞数

文章标签： table固定列横向滚动 table横向滚动条

在后台管理项目中遇到Element UI表格的合计功能问题，当表格出现横向滚动条时，合计行显示在滚动条下方，不满足需求。尝试了网上的修改样式解决方案，虽然能解决一部分问题，但当需要固定列时，会导致合计行与固定列错位。最终通过手动编写合计行代码成功解决了这一问题，实现了符合需求的表格合计功能。

摘要由CSDN通过智能技术生成

这段时间做后台管理项目,涉及到element表格的合计功能,但是当出现横向滚动条的时候发现合计一行在滚动条的下方,不符合产品需求.百度了一下,网上好多处理方案,基本上都是修改样式,如下面的代码:

.el-table {   overflow: auto;} .el-table--scrollable-x .el-table__body-wrapper {   overflow-x: visible; } .el-table__body-wrapper, .el-table__header-wrapper, .el-table__footer-wrapper {   overflow: visible; } .el-table::after {   position: relative !important; }

虽然这样也可以解决.但是,如果要求固定列的话,就会出现固定列和合计错位.还是解决不了问题.
然后就自己手写一个合计行,解决问题.上代码

关键代码就是这里了单独拿出来,这里的’‘合计’’ 判断可以根据自己的实际情况来处理,如果后端返回的数据不是Number类型,需要转换的话就不能这么判断了.