ant design实现嵌套table

​

目录

前言

导语

代码部分

第一步

第二步

总结

运行结果

---

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

今天页面有了一个新的需求 需要封装一个嵌套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为两个数组

运行结果

​编辑

​