5.4-iuap应用平台前端培训_案例开发（添加分页和表格联动）.md

添加分页和表格联动

以角色管理为例

1. 完成表格功能 见 5.4-iuap应用平台前端培训_案例开发（添加分页和表格联动）

const column = [
           {
               title: "角色组管理",
               dataIndex: "groupM",
               key: "groupM",
               render(text,record,index){
                   return (
                       <a onClick={()=>{self.toGroupM(record)}}>角色组管理</a>
                   )
               }
           },
           {
               title: "角色权限管理",
               dataIndex: "groupP",
               key: "groupP",
               render(text,record,index){
                   return (
                       <a onClick={()=>{self.toGroupP(record)}}>角色权限管理</a>
                   )
               }
           },
           {
               title: "角色编码",
               dataIndex: "roleCode",
               key: "roleCode",
           },
           {
               title: "角色名称",
               dataIndex: "roleName",
               key: "roleName",
           },
           {
               title: "角色描述",
               dataIndex: "roleDescribe",
               key: "roleDescribe",
           },
           {
               title: "操作",
               dataIndex: "e",
               key: "e",
               render(text,record,index){
                   return (
                       <div className='operation-btn'>
                           <Button size='sm' className='edit-btn' onClick={()=>{self.edit(true,record)}}>编辑</Button>
                           <Button size='sm' className='del-btn' onClick={()=>{self.delItem(record,index)}}>删除</Button>
                           <Button size='sm' className='detail-btn' onClick={()=>{self.edit(false,record)}}>查看</Button>
                       </div>
                   )
               }
           },

       ];
const { list }= this.props;// table数据
<Table
   rowKey={(r,i)=>i}
   columns={column}
   data={list}

2. 新增分页功能
   1. 引入分页组件

   import Pagination from 'bee-pagination';
   import 'bee-pagination/build/Pagination.css';
   

   2. 从接口中获得分页信息并初始化分页。

   let {  pageSize, pageIndex, totalPages } = this.props;
   <Pagination
       first
       last
       prev
       next
       boundaryLinks
       items={totalPages}
       activePage={pageIndex}
       onDataNumSelect={this.dataNumSelect}
       onSelect={this.onPageSelect}
       showJump={true}
   />
   

   3. 监听分页变化事件

   当分页发生变化时，调用后台接口，更新table表格数据，即可实现分页与表格联动

   onPageSelect = (value) => {
       this.search({
           pageIndex: value,
           pageSize: this.props.pageSize
       })
   }
   dataNumSelect = (value) => {
       let pageSize = (value + 1) * 5;//针对于5条/10条/15条/20条选项
       this.search({
           pageSize: pageSize,
           pageIndex: 1
       })
   }