使用 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 = []; //獲取接口中的數據
        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>   /*自定義內容*/ }]

下班，下班。