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