Antd table react 的滚动加载

自己写的，虽然玩了几年前端，但是还是喜欢用生命周期做功能

不太习惯function组件

可以不用外层包div来操作

直接用原生js获取高度和监听滚动事件来完成效果

代码如下

1. import { Table} from 'antd' 之后，再渲染组件的地方把Antd Table的pagination属性设置为false，并且将表格头部给固定sticky设定成top，提示信息是显示在表格的下方的

<div>

                   <Table 

                      className="paddingT10"

                      columns={columns}

                      rowSelection={{ ...rowSelection}}

                      dataSource={this.state.showTable}

                      pagination={false}

                      sticky={'top'}

                      scroll={{ y: this.woTableHeight  }}  />

  

                   {this.state.showNP?(<div className="center fn08 mt9">继续加载...</div>):''}

                   {this.state.showAP && this.state.rowdata.length!==0?(<div className="center fn08 mt9">数据到底了，朋友</div>):''}

               </div>

2.我的数据是一次展示十条，下拉到底的按需加载，你需要一个初始化表格的方法，先加载10笔数据之后如果触底了，就把页数加1

woTableHeight 这个是我表格内容的高度，大家可以参考看看，200是大概抓的页面空白的空间。

因为是React代码，要是在这里看到了this.state必须在构造函数里面初始化

componentDidMount(){

        //初始化的表格

         this.showTable()

         var woTableHeight = document.getElementsByClassName('modifyContaner-fluid')[0].offsetHeight-200-(document.getElementsByClassName('searchBox')[0].offsetHeight+document.getElementsByClassName('searchBox')[0].offsetTop)

         this.woTableHeight = woTableHeight

       //监听事件本身的this指向元素本身，为了要取得整个类的this指向，把this用that代替

        var that = this

        document.getElementsByClassName('ant-table-body')[0].onscroll = function (e) {

          that.setState({showAP:false})

          that.setState({showNP:false})

          if(document.getElementsByClassName('ant-table-body')[0].scrollTop+e.target.clientHeight >  e.target.scrollHeight-1){

            

            var page = that.state.page

            

            if(that.showData.length>page*10){

              that.setState({showNP:true})

              page +=1

            }else{that.setState({showAP:true})}

            

            that.setState({page:page})

            setTimeout(function(){  that.getRecord()    },3000)

          }

        }

    }

3.this.showTable() 这个方法里面包括了表格数据接口的调用，getRecord()这个函数别的在我的项目里功能用的到,所以另外写一个没有参数的方法调用它

var rowdata是接口的返回值，我们初始化条件的this.state.page应该设置成1，当页数不够装数据的时候，就一直把数据加给var arr=[]

showTable(){  this.getRecord() }

getRecord(data){

        getTrainRecord(data).then((res)=>{

            this.showData=res.data

            var rowdata = res.data

            var arr=[]

            var count = this.state.page*10

            

            if(count<rowdata.length){

              console.log("加载中")

            }

            if(count==rowdata.length){

              console.log("加载完毕")

            }

            rowdata.map((item,key)=>{

                var obj={}

                obj['key']=item.id

                obj['code']=item.banding

               ........下面写你自己的属性

              

                if(key<count-1){

                  arr.push(obj)

                }

                

            })

            this.setState({rowdata:res.data,showTable:arr,showNP:false})

        }).catch((err)=>{

            console.log(err,"接口连接失败....")

        })

    }