根据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和数值,是因为官网为修复该issue
现在发现max-height的合法的值除了数字或者单位为 px ,还可以是百分比,例如:max-height=“100%”这样设置是可以的。所以响应的动态设置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及以上的版本,第一种方案依然有效,如果你有更好的方案,欢迎评论~