0


Element UI的表格高度自适应。

项目场景:

在开发后台管理系统的时候,我们的main区域有时会因为表格的高度固定导致不同分辨率情况下展示不同,低分辨率情况下会出现整体竖向滚动条。


问题描述

element ui的表格有height属性,但是他是固定的,不会随着分辨率不同进行自适应。低分辨率可能会出现滚动条。

<el-table
    :data="tableData"
    height="250"
    border
    style="width: 100%">

解决方案:

可以将element ui table的height属性高度进行calc(100vh - xx)进行自适应。这样表格高度就会随着分辨率不同进行自适应。其中xx单位可以为px,也可以为rem。

如果配置了rem,推荐使用rem。

<el-table
    :data="tableData"
    height="calc(100vh - 100px)"
    border
    style="width: 100%">
<el-table
    :data="tableData"
    height="calc(100vh - 10rem)"
    border
    style="width: 100%">
标签: ui vue.js 前端

本文转载自: https://blog.csdn.net/weixin_57065954/article/details/129589472
版权归原作者 浅暖啊 所有, 如有侵权,请联系我们删除。

“Element UI的表格高度自适应。”的评论:

还没有评论