- 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',},
]
}],
}];
请问如何实现?
- 共 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中定义rows和columns。例如:```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 (
); } } ```在这个组件中,
rows和columns的值在组件的state中定义。当你点击按钮时,rows的值会更新为新的行,而columns的值也会根据新的行更新。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
