ant design实现嵌套table

简介: 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为两个数组


运行结果

image.png


image.pngimage.png

相关文章
jira项目笔记21-ant design table有tableProps属性
jira项目笔记21-ant design table有tableProps属性
140 0
|
前端开发
ant design中rowKey的作用
ant design中rowKey的作用
138 0
|
前端开发
关于ant design中input加前缀的问题
关于ant design中input加前缀的问题
136 0
|
前端开发
ant design table中增加按钮的两种方式
ant design table中增加按钮的两种方式
234 0
|
前端开发
关于ant design table组件里面文字溢出
关于ant design table组件里面文字溢出
131 0
|
前端开发
ant design form赋值问题
ant design form赋值问题
95 0
|
数据格式
hook项目实例之原始数据形成ant design table表格
hook项目实例之原始数据形成ant design table表格
45 0
|
数据处理 数据格式
hook项目实例之原始数据形成ant design table表格 2
hook项目实例之原始数据形成ant design table表格
66 0
|
前端开发 数据格式
再次接触老朋友react+ant design table合并单元格
再次接触老朋友react+ant design table合并单元格
146 0
Ant Design:表格如何使用?
Ant Design:表格如何使用?
100 0