【React工作记录八十三】React+Hook+ts+antDesign实现table行编辑功能

最新推荐文章于 2024-09-03 09:06:44 发布

前端大歌谣

最新推荐文章于 2024-09-03 09:06:44 发布

阅读量173

点赞数

分类专栏：前端项目工作实战文章标签： react.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/geyaoisnice/article/details/129376719

版权

前端项目工作实战专栏收录该内容

146 篇文章 6 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用React、Hook、TypeScript和antDesign来实现表格的行编辑功能。通过定义组件、设置可编辑行和单元格、以及处理保存操作，实现了双击表格行进行编辑的交互。详细步骤包括对column的配置和默认数据的设定，整个过程相对简单，主要参考了antDesign的API进行实现。

摘要由CSDN通过智能技术生成

前言

大家好我是歌谣今天要说的是ant design实现表格行编辑的功能考虑问题的时候我们需要多看官方的api

开发开始

紧接着我们对照着api进行开发首先加一个table

 <Table
                     onChange={onTableChange}
                        rowKey="id"
                        components={components}
                        rowClassName={() => 'editable-row'}
                        bordered
                        dataSource={menuData.list}
                        pagination={
  {
                            pageSizeOptions: ['5', '10', '20', '50'],
                            
                            total: menuData?.page.dataTotal,