antd table动态表头_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',},

]

}],

}];

请问如何实现？

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

antd table动态表头_react动态配置antd table的columns
constructor(props) { super(props) this.state = { fieldDdata: data,//操作动态columns的配置 columns: [], tabl ...
antd table动态表头_使用 antd@4 table 自定义筛选表头功能做一个联动搜索表头筛选...
前言: 上篇文章是使用 antd@4 table 自定义表头筛选完成一个表格动态列的功能,这次需要完成一个表头联动条件筛选功能. 一.开始前开始之前先去 Antd 官网看下「自定义的列筛选功能」的代 ...
封装element中的table表格动态渲染（动态表头，可操控列）
vue+element实现动态表格:根据后台返回的属性名和字段动态生成表头可变表格由于项目需求,需要有一个动态表格,可以根据配置或从后台获取表格属性列.并加上了某一行需要点击跳转和操作列里面的功能 ...
Ant Design table实现表头列宽拖拉官方 vue-draggable-resizable的魔改版
Ant Design table实现表头拖拽官方 vue-draggable-resizable的魔改版这里顺便也说一下使用官方vue-draggable-resizable组件,可能也有人不喜欢 ...
关于element table 动态表头+动态表头及内容+表格优化+初始化表格+隐藏功能，技术提升请来！
本篇文章属于升级版,欢迎交流指教~~ 导航: 表格头部与内容对不齐表格内容过长处理初始化闪过暂无数据动态表头1 动态表头+内容2 动态表头及层级表头 1.第一个就是表格头部与内容对不齐的问题了, ...
table多行表头合并 vue_vue elementUI table 自定义表头和行合并的实例代码
最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染. 但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能.这个时候需要动态渲染 ...
maven项目 ant_将大型项目从Ant迁移到Maven
maven项目 ant 事实是我们处在艰难时期. 我们花了将近三个月的时间将构建机制从Ant迁移到Maven . 如果您打算在大型项目中进行同样的安排,那是您必须安排的最短时间. 我们仍在努力解决这种 ...
将大型项目从Ant迁移到Maven
事实是,我们处在艰难时期. 我们花了将近三个月的时间将构建机制从Ant迁移到Maven . 如果您打算在大型项目中做同样的事情,那就是您必须安排的最短时间. 我们仍在努力解决这种迁移带来的一些附带影响 ...
锁定表头和固定列(Fixed table head and columns)
前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery. 因为方法很简单,就未封装成插件的形式,仅 ...
EasyExcel解析动态表头及导出
前言 excel文件导入及导出,是日常开发中经常遇到的需求.本次笔者以EasyExcel为例,针对在项目中遇到的动态表头解析及导出的场景,详细介绍具体的代码实现过程. 参考地址 https://git ...

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

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

最新文章

热门文章