使⽤antdTable组件，异步获取数据
使⽤React.js + Redux + antd 制作CMS 后台内容管理系统，分享⼀点点积累，欢迎讨论。
在this.state中初始化数据：
this.state = {
pageNum:1,  /*翻页查询*/
pageSize:10,  /*分页查询*/
activePage: 1,  /*默认显⽰⼀页*/
selectedRowKeys: [],  // 这⾥配置默认勾选列
loading: false,  /*antd*/
selectedRow:[]
}
在制作过程中，根据需要把antd的官⽅教程的分页查询⽅法，更改如下：
/*翻页事件*/
onShowSizeChange(current, pageSize){
this.props.searchGroupManage({page:current ,size: pageSize});
}
/
*分页事件*/
onChange(current){
    this.props.searchGroupManage({page:currentsize:this.state.pageSize});
}
render() ⽅法中，解析数据：
//定义antd table 数据
const data = [];
//获取接⼝中的数据
const rows = this.props.versionGroupState.userGroupManageList;
//判断，如果第⼀次渲染是没有数据的，则不进⾏操作，第⼆次渲染才有数据，再进⾏下⾯的操作if(rows){
//分页
pagination = {
total: al,/*这⾥是所有的数据*/
showSizeChanger: true,
//把下⾯这两个函数变为对象，这样它们的函数⾥就了this再bind this就没问题了
ShowSizeChange.bind(this),
Change.bind(this)
}
//重新组织数据，并push到data中
rowsList = rows.list;
console.log("54564564" + rowsList);
//antd 数据解析
for(let i = 0 ; i < rowsList.length; i++){
lockedStatu = rowsList[i].lockedStatus === 'false' ? '帐号巳锁定' : '帐号未锁定';
isAdminManage = rowsList[i].isAdmin === 'true' ? '管理员' : '普通帐户';
//锁定时间
lockedTime = rowsList[i].lockedOn === null ? '' : '';
//创建时间
let createdYear = this.formatDate(rowsList[i].createdOn);
console.log("5484216354654" + createdYear);
//push数据
data.push({
key: i,
mobile: rowsList[i].mobile,
username: rowsList[i].username,
lockedStatus: lockedStatu,
lockedOn:lockedTime,
isAdmin:isAdminManage,
createdOn:createdYear,
createdBy:rowsList[i].createdBy
})
}
}
return(
<div id='user-table'><Table rowSelection={rowSelection} columns={columns} dataSource={data} pagination={pagination} />  /*渲染Table组件*/            </div>
);
如果表格中有⾃定义的数据，可以在columns中插⼊⾃定义对象：
代码如下：
/*加⼊的⾃定义对象*/
const columns = [{
title: '标题名称',  /*⾃定义标题*/
dataIndex: '',  /*⾃定义数据，默认为空。因为⾃定义数据⼀般⽤来指定某个功能，要⽤render来return*/
key: 'x',  /*区别table的其它key，可以指定key值*/tabletotal函数
render: (可以传参数) => <Button type="dashed" onClick={this.showModal.bind(this,row)}>⾓⾊转换</Button>  /*⾃定义内容*/
}]
下班，下班。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。