el-table表格动态设置滚动高度

max-height属性

max-height属性，值为数字或者单位为 px 的高度，当table表格的高度超出其设置的高度时，滚动显示。

当max-height设置固定的值时，在不同尺寸的屏幕下 会表现出不一样的效果，外层盒子的高度变大，但是el-table的高度是固定的，这样底部的空白区域有就明显的差别。

代码演示如何动态设置表格高度

<template>
  <div id="app">
    <el-table
        :data="tableData"
        style="width: 100%"
        :max-height="agileHeight"
    >
      <el-table-column  prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

created() {
  this.handleGetAgileHeight()
  //窗口改变大小时触发
  window.addEventListener('resize',this.handleGetAgileHeight)
},
beforeDestroy() {
  //销毁监听
  window.removeEventListener('resize',this.handleGetAgileHeight)
},
methods:{
  handleGetAgileHeight(){
    //表格高度 = 浏览器的高度 - 页面固定部分的高度
    this.agileHeight = window.innerHeight - 220
    // this.agileHeight = window.innerHeight * 0.8 - 20
  }
}