ant-design-table高度自适应4.23.2

 1.ant-design版本："antd": "^4.23.2"

2.定义样式:

{
.table_wrapper {
  /* padding:10px 0; */
  background-color: #fff;
  overflow: hidden;
  width: 100%;
  /*height: 100%;*/
}
  .custom-table-default{
  :global{
    .ant-table-body{
      overflow-y: auto!important;
    }
  }
}

.custom-table-flex{
  &-empty{
    :global{
      .ant-table-body{
        table{
          height: 100%;
        }
      }
    }
  }
  :global{
    .ant-table-wrapper {
      height: 100%;
      .ant-spin-nested-loading {
        height: 100%;
        .ant-spin-container {
          height: 100%;
          display: flex;
          flex-flow: column nowrap;
          .ant-table {
            flex: 1;
            // overflow: auto;
            flex-basis: 0;
            .ant-table-container {
              height: 100%;
              display: flex;
              flex-direction: column;
              //overflow-y 自适应
              .ant-table-body{
                overflow-y:auto!important;
                flex:auto;
                height: 100px;
              }
            }
          }
          .ant-pagination {
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }
  }
}
  
  .full-height{
    height: 100%;
  }
    
}

3.封装Table

 isFlex= ()=>{
    //flex作为自定义的属性，如果传true，表示要高度自定义
   let {flex} = this.state.customProps ;
   return flex === true ;
 }  

componentDidMount() {
   this.onScroll();
  }

  componentWillUnmount(){
    window.removeEventListener('resize', this.windowScroll);
  }

  componentDidUpdate() {
    this.onScroll();
  }

  onScroll = ()=>{
    if(this.isFlex()){
      const TableCellScrollbarWidth = 17 ;
      const table = ReactDom.findDOMNode(this.state.refs._tableDiv) ;

      if(table){
        const tableBody = table.querySelector('.ant-table-body') ;
        if(tableBody){
          const tableBodyHeight = tableBody.clientHeight ;
          const tableContentHeight = tableBody.scrollHeight ;

          //ant-table-cell-fix-right
          const antTableCellScrollbar = table.querySelector('.ant-table-cell-scrollbar') ;
          let fixedDoms = table.querySelectorAll('.ant-table-header .ant-table-cell-fix-right') ;
          if(fixedDoms && fixedDoms.length > 0 && antTableCellScrollbar){
            if(tableBodyHeight === tableContentHeight){
              //如果不出滚动条
              if(this.state.columnFixedType !== 'minus'){
                this.state.columnFixedType = 'minus' ;
                for(let fixedDom of fixedDoms){
                  fixedDom.style.right = parseInt(fixedDom.style.right) - TableCellScrollbarWidth + 'px';
                }
              }
            }else{
              if(this.state.columnFixedType && this.state.columnFixedType !== 'plus') {
                this.state.columnFixedType = 'plus';
                for(let fixedDom of fixedDoms){
                  fixedDom.style.right = parseInt(fixedDom.style.right) + TableCellScrollbarWidth + 'px';
                }
              }
            }
          }
        }
      }
    }
  }

 windowScroll=()=>{
    this.deounce(this.onScroll,50)() ;
  }

  tableScroll=()=>{
    this.deounce(this.onScroll,50)() ;
  }

  deounce=(fn, delay)=>{
    let timer = null ;
    return ()=>{
      if(timer){
        clearTimeout(timer) ;
      }
      timer = setTimeout(()=>{
        fn() ;
      },delay)
    }
  }  

 render() {
    const isFlex = this.isFlex() ;

    if(isFlex ){
      fieldProps.scroll.y = '100%' ;
    }
    let {className} = this.props ;
    return (
      <div className={classnames(styles.table_wrapper,{
        [styles['custom-table-flex']]:isFlex,
        [styles['custom-table-flex-empty']]:isFlex && isEmpty(fieldProps.dataSource),
        [styles['custom-table-default']]:!isFlex && customProps.scrollY,
        'full-height':isFlex,
        className,
      })} ref={ref => (refs._tableDiv = ref)} onScrollCapture={this.tableScroll}>
        <Table {...fieldProps}/>
      </div>
    );
  }

4.使用的地方

//大概示例
<div class="wrapper">
    <div class="header">
        我是header
    </div>
    <div class="content">
        <CustomTable customProps={{flex:true}} {...otherProps}/>
    </div>
</div>

<style>
    .wrapper{
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .header{
        
    }
    .content{
        height:100%;
        flex:1;
    }
<style>

5.升级了一下版本，重新调整了一些地方，记录一下