导语
今天页面有了一个新的需求 需要封装一个嵌套table组件
编辑
代码部分
第一步
<BaseTable rowKey="code" pageIndex={pageIndex} pageSize={pageSize} total={boothTotal} columns={columns} dataSource={boothData} expandedRowRender={expandedRowRender} onTableChange={this.handleChange} />
第二步
const expandedRowRender = (record) => { const columnsList = [ { title: '规格', dataIndex: 'attrName', }, { title: '规格编码', dataIndex: 'code', }, { title: '价格', dataIndex: 'stockNum', }, { title: '库存', dataIndex: 'stockNum', }, ]; return ( <BaseTable rowKey="code" columns={columnsList} dataSource={record.skuList} pagination={false} rowSelection={{ selectedRowKeys, onChange: this.onSelectChange, type: 'radio', }} /> ); };
总结
1要点解析 这是二次封装的table 具有table的属性
2数据格式满足外层的datasource为a 里层的datasource为b 且a b为两个数组
运行结果