账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    React项目使用ant Table组件动态生成columns
    23
    0

    1.描述:公司做一个后台项目,需要渲染列表,我是用的是ant的Table组件,但是要求根据数据动态生成columns,请问有什么方法可以把一下类似的数据动态生成对应的columns吗?
    2.数据结构:const schemasMessage = [

    {
        "code": "011234567890",
        "generalInfo": {
            "name": "xx有限公司",
            "shortName": "xx",
            "taxPayerType": "xx",
            "taxPayerTypeId": "1",
            "registeredCapital": 500,
            "characterOfEconomy": "xxx",
            "characterOfEconomyId": "21"
        },
        "transaction": {
            "bankName": "xx",
            "bankAccount": "1234567890",
            "bankLocation": {
                "province": "xx",
                "city": xx",
            }
        },
        "location": {
            "province": "北京",
            "city": "北京",
            "district": "海淀区",
            "street": "xx",
            "address": "xx",
            "postCode": "01000000"
        },
        "contacts": [
            {
                "name": "xx",
                "position": "xx"
            },
            {
                "name": "xx",
                "position": "xx"
            }
        ],
        "marketing": {}
    }]
    const columns = [
    {title:'Code',dataIndex: 'code',key:'code',fixed: 'left'},
    {title: 'GeneralInfo',
        children:[
            {title:'Name',dataIndex: 'name',key:'name'},
            {title:'shortName',dataIndex: 'shortName',key:'shortName'},
        ]

    }, {

    title: 'Transaction',
    children: [{
        title: 'bankName',
        dataIndex: 'bankName',
        key: 'bankName',
    },
        { title: 'bankAccount',
            dataIndex: 'bankAccount',
            key: 'bankAccount',},
        {
        title: 'bankLocation',
        children: [{
            title: 'province',
            dataIndex: 'province',
            key: 'province',
        }, {
            title: 'city',
            dataIndex: 'city',
            key: 'city',
        }],
    }],

    },

    {
    title: 'contacts',
    children: [{
        title: 'contacts1',
        children:[
            {title: 'Name',
                dataIndex: 'name',
                key: 'name',},
            {title: 'position',
                dataIndex: 'position',
                key: 'position',},
        ]
    },{
        title: 'contacts2',
        children:[
            {title: 'Name',
                dataIndex: 'name',
                key: 'name',},
            {title: 'position',
                dataIndex: 'position',
                key: 'position',},
        ]
    }],

    }];

    请问如何实现?

    2
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 逃不出的爱情 普通会员 1楼

      在React中,我们可以使用Ant Design库的Table组件来动态生成columns。以下是一个简单的示例:

      首先,我们需要在项目中引入Ant Design库。如果你使用的是npm,你可以通过以下命令来安装:

      bash npm install antd

      然后,你可以创建一个名为TableComponent的组件。这个组件应该接受一个rows参数,这个参数是一个数组,包含了你要在Table中显示的所有行。

      ```jsx import React from 'react'; import { Table, TableBody, TableHead, TableBodyRow, TableBodyText } from 'antd';

      class TableComponent extends React.Component { render() { return (

      {this.props.children}
      ); } }

      export default TableComponent; ```

      在这个组件中,dataSource是Table组件的源数据,columns是Table组件的列数。dataSourceLayout是一个可选的属性,用于指定Table的布局。

      最后,你需要在你的组件的state中定义rowscolumns。例如:

      ```jsx class App extends React.Component { state = { rows: [ { id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 3, name: 'Bob' }, ], columns: [ { title: 'Name' }, { title: 'Age' }, ], };

      render() { return (

      ); } } ```

      在这个组件中,rowscolumns的值在组件的state中定义。当你点击按钮时,rows的值会更新为新的行,而columns的值也会根据新的行更新。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部