el-table的底部留白缺陷

el-table底部留白.png
会出现底部留白的原因:

我的表头是动态生成的,造成了bodyHeight的高度计算错误。

解决方案:

给table设置class:table_class

.table_class {
 // 设置表格header的高度
 /deep/ th {
   height: 44px;
 }
/deep/ th.gutter:last-of-type {
  height: 0 !important;
}
 // 设置表格body的高度
 /deep/.el-table__body-wrapper {
  //解决数据展示超出body高度不滚动bug
  overflow-y: auto;
   // 减去的是表格header的高度
   height: calc(100% - 44px) !important;
 }
}
// 当表头有多行文字时,可以适当调整高度</pre>

如有错误,欢迎指正!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容