React項(xiàng)目使用ant Table組件動(dòng)態(tài)生成columns

1.描述：公司做一個(gè)后臺(tái)項(xiàng)目，需要渲染列表，我是用的是ant的Table組件，但是要求根據(jù)數(shù)據(jù)動(dòng)態(tài)生成columns，請(qǐng)問(wèn)有什么方法可以把一下類似的數(shù)據(jù)動(dòng)態(tài)生成對(duì)應(yīng)的columns嗎？
2.數(shù)據(jù)結(jié)構(gòu)：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": "海淀區(qū)",
        "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',},
    ]
}],

}];

請(qǐng)問(wèn)如何實(shí)現(xiàn)？

回答

編輯回答

深記你

function adds(datas){
     var arr=[]
     Object.keys(datas).map(r=>{
      if(typeof datas[r] == 'object'){
       arr.push({title:r,children:adds(datas[r])})
     }else{
      arr.push({title:r,dataIndex:r,key:r})
    }
                  
    })
     return arr
  }
              
  console.log(adds(schemasMessage[0]))

 判斷
  "contacts": [
        {
            "name": "xx",
            "position": "xx"
        },
        {
            "name": "xx",
            "position": "xx"
        }
    ],
    
  function adds(datas){
     var arr=[]
     Object.keys(datas).map(r=>{
     if(!Array.isArray(datas[r])){
     if(typeof datas[r] == 'object'){
        arr.push({title:r,children:adds(datas[r])})
     }else{
        arr.push({title:r,dataIndex:r,key:r})
     }
    }else{
      console.log(datas[r])
      let arrs={'title':r,'children':[]}
      arrs.children =datas[r].map((rs,index)=>{
      if(typeof rs== 'object'){
        return    {title:r+index,children:adds(rs)}
      }else{
        return {title:rs,dataIndex:rs,key:rs}
      }
     })
        arr.push(arrs)
     }
     })
      return arr
      }
              
    console.log(adds(schemasMessage[0]))

2018年3月13日 00:57