antd table动态表头_React项目使用ant Table组件动态生成columns

最新推荐文章于 2024-08-29 10:45:44 发布

原创最新推荐文章于 2024-08-29 10:45:44 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#antd table动态表头

在React项目中，使用Ant Design的Table组件时，常常需要根据后台返回的数据动态生成columns配置。本文介绍如何根据`schemasMessage`数据结构，生成如`columns`所示的动态表头。具体实现涉及递归遍历数据，构建嵌套的columns对象，以展示复杂层级的表格数据。

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',},

]

}],

}];

请问如何实现？