antd中的嵌套表格使用

开发antd的嵌套表格功能,

因为对antd不熟练,一顿乱操作,一天下去了,

终于好了,说回正题,要实现一个嵌套表格功能,被嵌套的表格内容随着所在的主表格动态显示,说一下遇到的几个问题,

1,dataSource={data}data必须为数组,形如[{key:value}],所以先把要展示的数据存放在对象{ }中,再把数据存放在数组中,最后绑定dataSource

2,dataSource中的数据必须有key值,并且key值不能重复;

3,在显示嵌套菜单时,在Table控件中添加expandedRowRender={this.expandedRowRender},在this.expandedRowRender方法中去渲染子表格的数据,注意这个方法有一个record参数,提供了主表格中的数据。

例如:

 expandedRowRender = (record) => {
    var ll = [];
    var dataidc = {};
    for (var item in record) {
       dataidc[item] = record[item];
     }
     ll.push(dataidc);
     columns = [
     { title: '名字', dataIndex: 'name', key: 'name' }
    ];
    return (
      <Table
        columns={columns}
        dataSource={ll}
        pagination={false}
      />
    );
  };
	<Table
      columns={this.columns}
      dataSource={data}
      expandedRowRender={this.expandedRowRender}
    />
  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值