美文网首页程序员菜鸟前端工程师
react-开发经验分享-Table表格组件里自定义翻页方法

react-开发经验分享-Table表格组件里自定义翻页方法

作者: Mr柳上原 | 来源:发表于2018-12-29 12:08 被阅读4次

    ant框架里,Table表格组件里自定义翻页组件的方法
    在Table表格组件里,自带了pagination翻页方法,不需要手动去写
    但是
    这个翻页是最基础的翻页
    很多时候,开发需求需要更多的翻页功能
    比如
    输入页码数字跳转到对应页码
    自定义每页展示多少条数据等等
    这时就需要在Table里加上pagination的需求方法

    // 需要注意的是,pagination接受的是object,所以需要使用双括号
    
    onShowSizeChange = (current, pageSize) => {
      console.log(current, pageSize);
    }
    
    onChange(date, dateString) {
       console.log(date, dateString);
    }
    
    <Table 
         columns={this.columns}
         dataSource={ProjectData}
         rowSelection={rowSelection}
         scroll={{x: 2500}}
         bordered={true}
         pagination={{
           showSizeChanger: true, // 是否允许快速跳转至某页
           showQuickJumper: true, // 是否允许改变 pageSize
           onShowSizeChange: this.onShowSizeChange, // pageSize 变化的回调
           onChange: this.onChange, // 页码改变的回调,参数是改变后的页码及每页条数
        }}
    />
    

    相关文章

      网友评论

        本文标题:react-开发经验分享-Table表格组件里自定义翻页方法

        本文链接:https://www.haomeiwen.com/subject/qfpulqtx.html