Elementui 表格底部空白 el-table__body-wrapper is-scrolling-none 高度错误

今天在用Elementui 的表格时,发现所有表格的底部和分页之间有留白 

在滚轮和下部分页之间隔了一个白块,但是一刷新就没了,表格恢复正常。

<el-table v-loading="loading" :key='tableKey' :data="genlist" @selection-change="handleSelectionChange" 
      height="calc(100% - 152px)" :stripe="true" @sort-change="handleSortChange" style="width: 100%;margin-bottom: 20px;"
         row-key="projectId" lazy border default-expand-all :tree-props="{children: 'children'}">
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="55"></el-table-column>
      <el-table-column v-for="(item, index) in headerList" headerAlign="center" :key="index" :min-width="item.width" :label="item.title" :prop="item.name" 
        :align="item.align" :sortable="item.isSort === true ? 'custom' : false" :label-class-name="item.dname" :show-overflow-tooltip="item.tooltip">

      </el-table-column>
    </el-table>

这里我是用模板直接生成,height="(100%-152px)" 自动计算渲染大小,我一开始认为是计算出错了,直到我打开调试器发现了问题

el-table__body-wrapper is-scrolling-none 的高度在没有完全展开的时候会造成表格体溢出,表格显示不完全,底部留白。

查阅了好久资料发现网上都说这是element的一个BUG

根据好多教程修改全局样式都没有生效

解决方法:

将height="(100%-152px)" 换成 :max-height="450",直接定义最大的表格体,让他自己渲染,不要计算

注意:

在用max-height时尽量不要使用计算的方式,我用max-height="(100%-152px)"时会造成滚动条消失,暂时还没有研究原因。

 

 

 

  • 12
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值