el-table根据屏幕⼤⼩动态设置max-height来⾃适应表格的最⼤
⾼度出现滚动条
根据element-ui的⽂档，max-height的合法的值为数字或者单位为 px 的⾼度。⽆法识别响应式的css，如：
max-height:calc(100vh - 40px)
//或者
max-height:calc(100% - 40px)
受⽹友启发，实现思路：
通过js计算表格的最⼤⾼度，然后将⾼度数值传给el-table的max-height属性，上代码：
html：
<el-table ref="table" :data="info" :max-height="tableHeight">
...
</el-table>
js：
<script>
export default {
data() {
return {
tableHeight: 0
}
},
mounted() {
this.tableHeight = window.innerHeight - 50;
/
/ 后⾯的50：根据需求空出的⾼度，⾃⾏调整
},
...
}
</script>
亲测，不⾏。。。⽹上⼤部分这个答案，但确实不⾏
于是，我看了下源码，发现el-table的max-height是有做监听的，所以，后期确实可以更改值，思路是对的，经过⼏番折腾，加上nextTick 就可以了：
<script>
export default {
data() {
return {
tableHeight: 0
}
},
mounted() {
this.$nextTick(() => {
this.tableHeight = window.innerHeight - 50;
//后⾯的50：根据需求空出的⾼度，⾃⾏调整
})
},
...
}
</script>
好啦，我觉得这个⽅式也不是特别完美，完美的做法是：提个issue，让element-ui可以⽀持max-height接收除px和数值之外的其他css，如：max-height:calc(100vh - 40px)。
番外：
更优雅的解决⽅案：
该⽅案只适⽤于element-ui2.7.2及以下的版本，2.8.0及以上max-height不⽀持百分百，只⽀持px和数值，是因为官⽹为修复该
现在发现max-height的合法的值除了数字或者单位为 px ，还可以是百分⽐，例如：max-height=“100
css设置表格滚动条%”这样设置是可以的。所以响应的动态设置el-table的max-height，我有了更优雅的解决⽅案，⽆需js，纯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>
⾄于2.8.0及以上的版本，第⼀种⽅案依然有效，如果你有更好的⽅案，欢迎评论~

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