element table组件根据屏幕大小动态设置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. 使用window.onresize监听屏幕尺寸变化

<el-table :height = 'screenHeight'>	
el-table>

<script>
  export default {
    data() {
      return{
		screenHeight: `${document.documentElement.clientHeight}` - 242,	
		}
    },
    mounted() {
        const that = this;
  		window.onresize = function listen() {
    	that.screenHeight = `${document.documentElement.clientHeight}` - 242;
  		};
    },
}
</script>

${document.documentElement.clientHeight} 可以获取到屏幕的高度，然后减去一个固定值就可以保证表格高度自适应了。

mounted加载函数中，如果页面宽高变化，则需要重新获取屏幕的高度值。此时需要用到的是window的一个监听尺寸变化的函数，就是 onresize函数。

第三种方案也有一定的问题，如果打开控制台，这样屏幕高度就会变化，但table的高度并没有实时的刷新变化。其实这个问题也好解决，只需要对屏幕的高度使用watch监听，当屏幕高度变化时，重新调用函数即可，这里不多写了。