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及以上的版本,第⼀种⽅案依然有效,如果你有更好的⽅案,欢迎评论~