antd 封装弹窗编辑组件 分页组件

Posted 2023-03-21

参考技术A import React, Component from 'react'
import Form, Input,Modal,Button from 'antd';
import bindActionCreators from "redux"
import connect from "react-redux"
import * as action from "../action/tableIndex"
class Formmodel extends Component


let mapStateToprops = (state) =>
return
...state.tablereducer


let mapDsipatchToProps = (dispatch) => bindActionCreators(action, dispatch)

export default connect(mapStateToprops, mapDsipatchToProps)(Formmodel)

React —— antd Table组件 分页Pagination

antd 自定义Pagination 分页功能,研究明白其实看着很简单 主要就是slice((pagenum-1)*pageSize,(pagenum-1)*pageSize+pageSize)

 {objlistdata.slice((pagenum-1)*pageSize,(pagenum-1)*pageSize+pageSize).map((item,index)=>{            return(
               <ContentList data={item.data} 
               key={item.id}               id={item.id}
               hasicon={item.iconurl==""?false:true} 
               optiondata={item.optiondata} 
               iconurl={item.iconurl}
               checkboxcheack={item.checkboxcheack}
               optionClick={this.optionClick}
               CheckboxonChange={this.CheckboxonChange}/>
              )
          })
          }
           <Pagination 
            size="small"
            current={pagenum}
             pageSize={pageSize}
             defaultPageSize={pageSize}
            total={objlistdata.length}
             pageSizeOptions={["5","10","15","20"]}
             onChange={this.changeNum}
             onShowSizeChange={this.changePageSize}
             showSizeChanger
             showTotal={(e)=>{return "共 "+e+" 条"}}
            />