element-ui 表格el-table高度不是一个固定值时固定表头

elementui中为表格组件提供了height属性实现固定表头


height可以为数字或者字符串，当为一个数字时表示固定的高度，也可以为百分比等字符串。
当height不是一个固定值时，如期望表格可以填充完页面剩余空间，并且固定表头时，可以通过给height属性赋值字符串形式实现。以页面中包含3部分，希望table组件填充其他两部分占据的页面剩余的部分为例：

1.使用一个单独的标签包裹el-table组件，父级组件使用flex纵向布局,父级的高度需要确定（通过固定px或者百分比或者其父级也是纵向flex布局，其设置flex:1来确定高度）
2.设置包裹table组件的标签flex:1
3.在el-table中添加属性height=“100%”注意是设置height属性，不是设置style

<template><divclass="content"><divclass="child1"><span>这是一个子标签,内容和高度不固定</span></div><divclass="custom-table"><el-table:data="tableData"height="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></div><divclass="child1"><span>这也是一个子标签</span></div></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-01',name:'王小虎',address:'上海市普陀区金沙江路 1519 弄'},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路 1519 弄'},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路 1519 弄'},{date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路 1516 弄'}]}}}</script><stylescoped>.content{height:240px;/* 可以根据需要设置,也可以是百分比或者在父级flex布局中通过flex:1来确定高度 */display: flex;flex-direction: column;}.custom-table{flex: 1;overflow: hidden;}</style>