element ui 表格高度设置，自适应

最近接的一个项目，用户希望表格的高度能更“人性化一点”，用户是上帝，那就只能缝缝补补了，我是个前端小白，有写的不好的，欢迎大家指正，希望也有更好的解决方案。
1、表格有高度限制，使用了element ui自带的表格height属性

<el-table
      :data="tableData"
      v-show="checkedColum.length>0"
      v-loading="tableLoading"
      stripe
      border
      style="width: 100%"
      height="500"
    ></el-table>

这样会有一个问题，表格高度会一直是一样的，数据只有一行和有多行，下面的分页都会在最下面，如图：
2、表格有显示区域，但是希望数据少的时候高度能自适应，用max-height属性

<el-table
      :data="tableData"
      v-show="checkedColum.length>0"
      v-loading="tableLoading"
      stripe
      border
      style="width: 100%"
      max-height="500"
    ></el-table>

这样表格高度会自适应，但是又出现一个问题，数据多然后数据少，表格高度会变小，但是如果一开始数据少，后面数据多，表格高度还会是小的，如下图1（表格高度高）–》图2（表格高度低）–》图3（表格高度高）：从图2到图3，高度不会变高

图1

图2

解决方案：给表格添加key

<el-table
      :data="tableData"
      v-show="checkedColum.length>0"
      v-loading="tableLoading"
      stripe
      border
      style="width: 100%"
      max-height="500"
      :key="sTable"
    ></el-table>
    data(){
    return{
    sTable: 1
    }
    }
    watch: {
    tableLoading() {
      ++this.sTable
    }
  },