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

相关文章
|
设计模式 存储 算法
整理牛客网 ----- 阿里校招 Java 后端 1-5 面 + HR 面面经
整理牛客网 ----- 阿里校招 Java 后端 1-5 面 + HR 面面经
638 0
整理牛客网 ----- 阿里校招 Java 后端 1-5 面 + HR 面面经
|
JavaScript 前端开发 Java
建立SpringBoot项目
在最新版本中,通过Eclipse建立Spring Boot项目,使用在Eclipse市场安装目前不太稳定,需要重新安装Spring Boot版本的Eclipse,现在介绍如何进行。
928 0
建立SpringBoot项目
|
11月前
|
API
如何在公众号里制作微信报名表
微信万能表单不仅可以制作各种报名单,也可以用作问卷调查,商品发布,登记汇总等,可以根据自己需求,来添加组件,比如姓名、手机号、性别、报名的时间、报名的图片等,因为微信报名表涉及的用途比较广泛,所以很多商家在做微信公众号报名表的时候,针对性不会太强,没有什么局限性,应用还是起来比较方便的
497 12
|
数据采集 存储 数据可视化
阿里云大数据ACA及ACP复习题(121~130)
本人备考阿里云大数据考试时自行收集准备的题库,纯手工整理的,能够覆盖到今年7月份,应该是目前最新的,发成文章希望大家能一起学习,不要花冤枉钱去买题库背了,也希望大家能够顺利通关ACA和ACP考试。
|
监控 Java 开发者
Java一分钟之-Java性能分析与调优:JProfiler, VisualVM等工具
【5月更文挑战第21天】本文介绍了Java性能优化的两个利器——JProfiler和VisualVM。JProfiler通过CPU Profiler、内存分析器和线程视图帮助解决过度CPU使用、内存泄漏和线程阻塞问题;VisualVM则聚焦于GC行为调整和类加载优化,以减少内存压力和提高应用性能。使用这些工具进行定期性能检查,是提升Java应用效率的关键。
402 0
|
12月前
|
消息中间件 监控 网络协议
Python中的Socket魔法:如何利用socket模块构建强大的网络通信
本文介绍了Python的`socket`模块,讲解了其基本概念、语法和使用方法。通过简单的TCP服务器和客户端示例,展示了如何创建、绑定、监听、接受连接及发送/接收数据。进一步探讨了多用户聊天室的实现,并介绍了非阻塞IO和多路复用技术以提高并发处理能力。最后,讨论了`socket`模块在现代网络编程中的应用及其与其他通信方式的关系。
892 3
|
消息中间件 存储 大数据
大数据-数据仓库-实时数仓架构分析
大数据-数据仓库-实时数仓架构分析
545 1
|
关系型数据库 MySQL 数据挖掘
当前时间的获取与利用:解析MySQL中的NOW()函数
在数据库管理中,记录数据的时间信息是至关重要的,而NOW()函数正是帮助我们获取当前日期和时间的有力工具。
768 0
|
机器学习/深度学习 算法 vr&ar
南大最新综述论文:基于模型的强化学习
南大最新综述论文:基于模型的强化学习
525 0
|
人工智能 小程序 前端开发
uniapp框架——初始化vue3项目(搭建ai项目第一步)
uniapp框架——初始化vue3项目(搭建ai项目第一步)
380 1