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

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

原创最新推荐文章于 2024-09-03 09:06:44 发布 · 247 阅读

收录于

当前文章被以下社区和专栏收录：

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

146 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

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

前言

大家好我是歌谣今天要说的是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,
                            showTotal: () => {

标签