前言
我是歌谣 我有个兄弟 巅峰的时候排名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为两个数组
运行结果
