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

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

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

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

//加了fixed之后失效
::v-deep .el-table__fixed-footer-wrapper tbody td.custom-cell{
	border-right: 1px solid #DBDFE5 !important;
}

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

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

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

效果:就是设置bottom值,使得不盖住滚动条。缺点:不适用与含有合计的table,如果含有合计,合计也会上移。
需要注意的是,上面的代码需要放在全局的样式文件中才有效果。

posted @   天宁哦  阅读(953)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示