解决代码:

.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;//直接设置横轴内容滚动条 即可撑高高度 还不影响使用
  }
}

四、总结:
直接设置横向滚动条既可以!有效的话点个赞评论收藏一波,让更多朋友能看到吧!

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐