猿问

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

    ]

},{



请问如何实现?



慕尼黑的夜晚无繁华
浏览 5323回答 1
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]))  
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答