javascript - antd table 组件中的数据怎么获取？

问题描述

问 题

最近在使用antd UI ，在用到table组件时，对于它的表格内容数据的获取，不知道该怎么办了。

const columns = [{
title: '手机号码',
dataIndex: 'mobile',
key:'mobile'

}, {

title: '用户名',
dataIndex: 'username',
key:'username'

}, {

title: '锁定状态',
dataIndex: 'lockedStatus',
key:'lockedStatus'

},{

title: '锁定时间',
dataIndex: 'lockedOn',
key:'lockedOn'

},{

title: '是否为管理员',
dataIndex: 'isAdmin',
key:'isAdmin'

},{

title: '创建时间',
dataIndex: 'createdOn',
key:'createdOn'

},{

title: '创建人',
dataIndex: 'createdBy',
key:'createdBy'

}];

const data = [];
const rows = this.props.versionGroupState.userGroupManageList;
for(let i = 0 ; i < rows.length; i++){

data.push({
    key: i,
    mobile: rows[i].mobile,
    username: rows[i].username,
    lockedStatus: rows[i].lockedStatus,
})

}

const { loading, selectedRowKeys } = this.state;

const rowSelection = {

selectedRowKeys,
onChange: this.onSelectChange.bind(this)

};

const hasSelected = selectedRowKeys.length > 0;

const pagination = {

total: data.length,
showSizeChanger: true,
onShowSizeChange(current, pageSize) {
    console.log('Current: ', current, '; PageSize: ', pageSize);
},
onChange(current) {
    console.log('Current: ', current);
}

}

columns 是表格的表头。
rows 是我异步获取的数据，也就是表格中要存放的数据。
我使用，官网中的方法，填充数据时，报错：

for(let i = 0 ; i < rows.length; i++){

data.push({
    key: i,
    mobile: rows[i].mobile,
    username: rows[i].username,
    lockedStatus: rows[i].lockedStatus,
})
}

请问，我该如何操作，怎么把rows 的数据解析到表格中？在网上也找不到相关的示例或教程，现在不知道该如何下手了，请问，有知道如何操作的大神，指点一二。谢谢！

解决方案

巳解决，下面是正确答案：

 //定义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)
            }
           
            rowsList = rows.list;
            console.log("54564564" + rowsList);
           
            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.bind(this,rowsList[i].createdOn);
                console.log("5484216354654" + createdYear);
                createdTime = rowsList[i].createdOn ? createdYear : '';

                //push数据
                data.push({
                    key: i,
                    mobile: rowsList[i].mobile,
                    username: rowsList[i].username,
                    lockedStatus: lockedStatu,
                    lockedOn:lockedTime,
                    isAdmin:isAdminManage,
                    createdOn:createdTime,
                    createdBy:rowsList[i].createdBy
                })
            }
        }

这篇关于javascript - antd table 组件中的数据怎么获取？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！