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}
    />

你可能感兴趣的:(React)