el-table使用fixed后,最后一行显示不全;el-table设置fixed后,最后一行被遮挡。
解决el-table使用fixed后显示不全问题
·
解决代码:
.el-table {
/deep/ .el-table__body-wrapper {
overflow-x: scroll !important;//直接设置横轴内容滚动条 即可撑高高度 还不影响使用
}
}
一、情景:给element的el-table设置fixed固定后,最后一行显示部分被遮挡。有的说是有时出现这个问题。但是官方文档使用方法却没有出现。
二、原因: 这个bug现象只会在 使用fixed且没有滚动条的情况下才会出现,这也就解释了官方案例为啥正常了。
三、问题分析:
注意:解决方案3.1是如何找到问题和修改的,但是不推荐。 解决方案3.2更好更推荐使用。
原因:el-table下有个el-table_fixed盒子,就是el-table_fixed高度不够导致了遮挡。
解决方案3.1(不推荐做法):
优点:显示正常
缺点:导致此固定列下方的滚动条被遮挡,导致无法点击滚动。
>
设置100%代码如下:
.el-table {
/deep/ .el-table__fixed {
height: 100% !important; //设置高优先,以覆盖内联样式 但是会遮挡滚动条
}
}
解决方案3.2(推荐做法):直接给表格内容 .el-table__body-wrapper 设置横向滚动条。
优点:直接就撑高了el-table_fixed的高度,显示正常,而且有滚动条时候也可以正常滚动。
缺点:内容足够时候也会有滚动条部分。但是这都是小的细节了对吧。。。可以忽略
下方是设置滚动条的代码↓↓↓↓↓↓↓↓↓↓↓↓↓
直接复制此一段代码即可。
.el-table {
/deep/ .el-table__body-wrapper {
overflow-x: scroll !important;//直接设置横轴内容滚动条 即可撑高高度 还不影响使用
}
}
四、总结:
直接设置横向滚动条既可以!有效的话点个赞评论收藏一波,让更多朋友能看到吧!
更多推荐
已为社区贡献25条内容
所有评论(0)