今天在用Elementui 的表格时,发现所有表格的底部和分页之间有留白
在滚轮和下部分页之间隔了一个白块,但是一刷新就没了,表格恢复正常。
这里我是用模板直接生成,height="(100%-152px)" 自动计算渲染大小,我一开始认为是计算出错了,直到我打开调试器发现了问题
<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>
el-table__body-wrapper is-scrolling-none 的高度在没有完全展开的时候会造成表格体溢出,表格显示不完全,底部留白。
查阅了好久资料发现网上都说这是element的一个BUG
根据好多教程修改全局样式都没有生效
解决方法:
将height="(100%-152px)" 换成 :max-height="450",直接定义最大的表格体,让他自己渲染,不要计算
注意:
在用max-height时尽量不要使用计算的方式,我用max-height="(100%-152px)"时会造成滚动条消失,暂时还没有研究原因。
https://mp.csdn.net/console/editor/html/116160400