300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > Element 表格固定列横向滚动条无法拖动的问题解决

Element 表格固定列横向滚动条无法拖动的问题解决

时间:2020-08-21 05:23:14

相关推荐

Element 表格固定列横向滚动条无法拖动的问题解决

在Element-UI中,当对表格列进行固定后,底部的横向滚动条就无法拖动了,主要的问题就是固定区域盖住了横向滚动条。

方案一:修改el-table__body-wrapper样式的层级,随便设个层级就可

.el-table__body-wrapper{z-index: 2}

效果:解决滚动条被遮住的问题,同时含有合计也适用,缺点:就是表头和合计那部分有阴影,中间的部分没有阴影,不过不影响效果,问题不大。

方案二:将固定区域底部留出一个滚动条高度的距离。

如下图所示为对固定列区域调整后的效果图:

下面是解决问题所需的代码:

.el-table .el-table__fixed {height:auto !important; bottom: 16px !important;&::before {background-color: transparent;}}

效果:就是设置bottom值,使得不盖住滚动条。缺点:不适用与含有合计的table,如果含有合计,合计也会上移。

需要注意的是,上面的代码需要放在全局的样式文件中才有效果。

码字不易,觉得有帮助的小伙伴记得点个赞鼓励下~

扫描上方二维码关注我的订阅号~

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。