首页 > 代码库 > 使用 antd Table组件, 异步获取数据
使用 antd Table组件, 异步获取数据
使用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 =http://www.mamicode.com/ []; //获取接口中的数据 const rows = this.props.versionGroupState.userGroupManageList; //判断,如果第一次渲染是没有数据的,则不进行操作,第二次渲染才有数据,再进行下面的操作 if(rows){ //分页 pagination = { total: rows.total,/*这里是所有的数据*/ showSizeChanger: true, //把下面这两个函数变为对象,这样它们的函数里就了this再bind this就没问题了 onShowSizeChange:this.onShowSizeChange.bind(this), onChange:this.onChange.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值*/ render: (可以传参数) => <Button type="dashed" onClick={this.showModal.bind(this,row)}>角色转换</Button> /*自定义内容*/}]
下班,下班。
使用 antd Table组件, 异步获取数据
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。