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和数值，是因为官网为修复该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及以上的版本，第一种方案依然有效，如果你有更好的方案，欢迎评论~