elementtable组件根据屏幕⼤⼩动态设置max-height属性设置表格最⼤⾼度，。
。。
element的table表格组件有⼀个max-height属性，可以设置table的最⼤⾼度，但是当我设置这个属性的值为百分⽐或者响应式的时候，却没有⽣效，如下所⽰。
max-height:calc(100vh - 40px)
//或者
max-height:calc(100% - 40px)
这是因为element-ui的⽂档，max-height的合法的值为数字或者单位为 px 的⾼度。⽆法识别响应式的css。
解决⽅法有以下⼏种：
⾸先列举出代码：
⾸先设置table组件的ref属性，以及设置max-height的值。
1. 使⽤nextTick
<script>
export default{
data(){
return{
tableHeight:0,
// 另⼀种写法，不需要在下⾯mounted
// tableHeight: window.innerHeight * 0.8
}
},
mounted(){
this.$nextTick(()=>{
this.tableHeight = window.innerHeight -100
})
},
}
</script>
2. 使⽤CSS设置
<style lang="scss">
.wrapper{
height:calc(100%-40px);
}
</style>
.
..
<div class="wrapper">
<el-table ref="table":data="info" max-height="100%">
...
</el-table>
</div>
该⽅案只适⽤于element-ui2.72及以下的版本，2.80及以上ma-height属性不⽀持百分百，只⽀持px和数值，但第⼀种⽅法仍然有效。
PS：这两种写法并不能设置表格的最⼤⾼度随着屏幕⼤⼩动态变化，只是实现了表格内容的最⼤⾼度，可以保证分页组件⼀直挨着表格内容下⽅。如果想动态设置，下⾯⽅法会有介绍
3. 使⽤size监听屏幕尺⼨变化
<el-table :height='screenHeight'>
</el-table>
<script>
export default{
data(){
return{css设置表格滚动条
screenHeight:`${document.documentElement.clientHeight}`-242,
}
},
mounted(){
const that =this;
that.screenHeight =`${document.documentElement.clientHeight}`-242;
};
},
}
</script>
${document.documentElement.clientHeight} 可以获取到屏幕的⾼度，然后减去⼀个固定值就可以保证表格⾼度⾃适应了。
mounted加载函数中，如果页⾯宽⾼变化，则需要重新获取屏幕的⾼度值。此时需要⽤到的是window的⼀个监听尺⼨变化的函数，就是onresize函数。
第三种⽅案也有⼀定的问题，如果打开控制台，这样屏幕⾼度就会变化，但table的⾼度并没有实时的刷新变化。其实这个问题也好解决，只需要对屏幕的⾼度使⽤watch监听，当屏幕⾼度变化时，重新调⽤函数即可，这⾥不多写了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。