element-ui表格高度自适应（el-table 自适应高度）

想让element-ui的表格 el-table 出现滚动条的时候，如果不做处理就只能是 height=“XXXpx”，给它一个固定的高度，我们的页面正常情况下，是不允许出现页面级滚动条的，也是不美观的，想让table自适应高度并且有滚动条，而且不会出现页面级滚动条，可以这么实现，下面是我写的一个小组件，如果你明白了他的原理，就可以灵活运用在你自己的项目中了。

1、组件代码（理解使用）

主要使用了flex让table-container占满剩余部分，使用绝对定位让table-container定在page-body-table 上面，加了几个插槽方便复用

<template><divclass="table-page-container"><divclass="page-header"><slotname="header"></slot></div><divclass="page-body-table"><divclass="table-container"><slotname="table"></slot></div></div><divclass="page-footer"><slotname="footer"></slot></div></div></template><script>exportdefault{data(){return{}},}</script><stylelang="scss"scoped>.table-page-container{width: 100%;height: 100%;display: flex;flex-direction: column;.page-body-table{flex: 1;position: relative;.table-container{position: absolute;width: 100%;height: 100%;}}}</style>

2、如何使用该组件

引入和注册组件就不写了，如果你的页面大部分都是这种结构，或者较多都是这种页面结构，可以全局注册，注意el-table的height属性的值必须是100%

<template><divclass="page-container"><TablePageContainer><template#header><div>头部</div></template><template#table><!-- table 部分 --><el-table:data="tableData"height="100%"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template><template#footer>一边表格都会有分页分页放在这里挺好的</template></TablePageContainer></div></template><script>exportdefault{data(){return{tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路 1518 弄',},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路 1517 弄',},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路 1519 弄',},{date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路 1516 弄',},],}},}</script>