表格的高度适配解决方法

要求：页面占满一屏，表格根据不同的页面高度进行适配滚动

解决方法：

1.利用flex布局使表格在的div，占满除按钮和页码以外的剩余空间

<div class='table-box'>
   // 按钮
   <div>
      <el-button type="primary" onClick={this.handleAddData}>
          {this.$t('common.add')}
      </el-button>
   </div>
   // 表格的div
   <div class='table-wrap' ref={this.tableBoxRef}>
       <hTable
           loading = { this.loading }
           align='center'
           columns ={ TableColumns }
           data={this.dataList}
           columnFormatter={this.columnFormatter}
           height={ this.height }
       />
   </div>
   // 页码
   <hPagination
         params={this.form}
         total={this.total}
         onSizeChange={this.handleSizeChange}
         onCurrentChange={this.handleCurrentChange}
    />
</div>

<style>
   .table-box{
     display: flex;
     flex-flow: column nowrap;
       .table-wrap{
           flex: 1;
       }
   }
</style>

2.在页面加载的时候，将包裹表格的div的高度给到table（this.$refs.tableBoxRef是包裹表格的div）

this.$nextTick(()=>{
    this.height= this.$refs.tableBoxRef?.clientHeight+'px'
})