React项目使用ant Table组件动态生成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',},
    ]
}],

}];

请问如何实现?

阅读 13.2k
1 个回答
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]))  
    
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏