解决element table 宽高自适应

·  阅读 1817

以下是布局:

<div class="container">
    <div class="table" >
        <el-table height="100%" :data="tableData" style="width: 100%" > </el-table>
    </div>
    <div class="pagination"></div>
</div>
复制代码

首先,container是需要有高度的一个容器,具体怎么设置需要结合布局实际需求,大多数情况可以使用flex:1去设置。

同样的,给container设置display:flex.table设置flex:1,使其可以撑开除了pagination以外的区域。

这里值得强调的是,flex布局,当你设置flex:1去撑开剩余空间时:当子元素宽或者高大于项目宽或者高时,项目会被撑开,因此,需要给table设置position:relative,给el-table设置position:absolute,使其脱离文档流而不会因为el-table里面的数据太多而撑开整个table父容器。

然后再给table设置height="100%”,这里要注意的是,在el-table标签上设置属性height="100%”时,同时给

.el-table--scrollable-y .el-table__body-wrapper {
    overflow-y: auto;
}
复制代码

设置了高度,这是element自定义的滚动条。

而如果给style="width: 100%;height:100%”设置高度,那么就需要给el-table加上overflow:hidden;这时的滚动条就是系统默认的滚动条。

最后,附上css代码:

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    .table {
        flex: 1;
        position: relative;
        /deep/.el-table {
            position: absolute;
        }
    }
}
复制代码

以上就是全部内容了,你会发现你的表格宽高都自适应了,不用感谢我,解决了你的问题就点个赞吧! 0_0

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改