React Ant 3.x 不同类型编辑,保存

已于 2022-06-28 15:56:37 修改
阅读量187 收藏 1
点赞数
文章标签： react.js es6 前端框架 前端
于 2022-06-28 15:55:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37207318/article/details/125503806
版权

前言

昨天开发有个需求,table表编辑，保存提交，但是编辑类型有input,inputNumber,select,datePicker，ant4.x已支持不同类型的编辑，项目由于是ant3.0版本，需要自己配置columns。

一、配置columns

可编辑栏中,需要的配置和规则都在columns中设置

 自定义定义可编辑表格

安卓出身前端半路出家
关注
React Admin 前端脚手架之ant-design-pro
西京刀客
01-04 2616
Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
【react+antd4.x】Form+Table可编辑单元格点击编辑错误展示为上一条内容
all_might1的博客
03-01 1298
想直接看解决方法，目录中就有简述 目录 一、问题描述 二、解决方案 方案一（官方）： 使用setFieldsValue来进行更新 方案二：调用resetFields()方法，对表单进行重置 一、问题描述 需求使用了Form+Table。在第二次点击编辑的时候就会展示上一次点击那条的内容。 在这个地方是复用了Form.Item，这部分会产生数据残留的问题，估计是不是存在了树里面。官方对于这种问题有给出解决方法 二、解决方案 在这边说两个解决方法，一个..
react 表格嵌套(主表和子表都可以新增、编辑、保存、删除、主表展开和分页国际化)
11-19
查阅资料，花几天时间整理的，支持新增行、单行编辑保存、展开、分页国际化；子表格增加、编辑、删除、保存。解决多个问题（包含组件，不包含store）
基于react + ant实现可编辑表格，可分页，可批量删除，保存等功能
weixin_44481459的博客
07-08 2633
最近因为工作需要，要基于react-ant做一个可编辑表格，具体功能如图所示，可新增，删除，批量删除，保存等功能，
基于AntD-Table的可编辑输入表格
cyoubo的专栏
10-06 2377
文章目录需求描述基本要实现的共嗯那个不能实现的功能设计思路结构方案基于适配器模式AntD的table定制实现结构Adapter操作类职责功能技术重点adapter 操作类相关部分单元格菜单职责功能技术重点实例代码可编辑表格组件功能职责技术重点实例代码 需求描述 基本要实现的共嗯那个 基于AntD的table控件，实现类似PPT中【表格】的功能 可以基于配置的行数(nRow)、列数(nColumn)信息生成指定尺寸的表格，且每一个单元格都是一个可入输入框 每一个输入框在输入完成后自动将输入值记录到组件sta
antd 可编辑增加的table
fred8的博客
04-29 669
父亲组件 import TargetForm from './compoent/targetform' // 提交数据 handleTarget = () => { this.child.validateFields((err, values) => { if (!err) { console.log(values); } }); }; <Modal title="设置目标系统"
用react 构建电子表格（10)--把前端格式数据保存到服务端
wh_xia_jun的专栏
03-02 319
与服务端交互，采用axios, 抄作业：React应用中封装axios, 和anttd配套，抄react中使用antd的table组件,和axios的请求 用nginx做代理，解决服务端跨域访问 baseurl配置：由于采取nginx，baseurl的问题转到ngnix配置文件当中去了 所以忽略掉项目中这个配置，这东西网上材料非常丰富 react router: 我的理想是： 和url相对应 和页面嵌套关系相对应 可以单独写到一个配置文件中 需要的时候，主要路径由服务端配置控制 可以传递
基于vue2.x+antdesign+antv x6实现的流程图编辑器.zip
最新发布
03-09
在本项目中，开发者利用了Vue2.x框架、Ant Design Vue UI库以及AntV X6图形引擎，构建了一个功能丰富的流程图编辑器。这个编辑器允许用户创建、编辑和展示流程图，对于业务流程设计、系统架构规划等领域具有很高的...
React + Node.JS巧妙实现后台管理系统实践经验
weixin_42963591的博客
01-31 1350
目前因学业任务比较重，没有好好的完善，现在比较完善的只有题库管理，新增题库，修改题库以及登录的功能，但搭配小程序使用，主体功能已经实现了 此后台系统是为了搭配我的另一个项目 School-Partners学习伴侣微信小程序而开发的。是一个采用Taro多端框架开发的跨平台的小程序。感兴趣的可以看一下之前的文章 希望大佬们走过路过可以给个star鼓励一下,感激不尽~ https://github....
基于ant.design做一个可编辑的table表格，且实现可校验样式、增加、删除数据
吃瓜群众的博客
02-03 5757
主要利用Form.List的field进行拓展，结合table使用 嵌套表单字段需要对 field 进行拓展，将 field.name 和 field.fieldKey 应用于控制字段。 // 只贴关键代码 const onFinish = (values)=>{ console.log(values) // 可以得到table } <Form initialValues={ {table:[{name:'lily'},{name:'lisa'}]} } onFinish={ onFi
Antd4可编辑单元格.txt
01-12
Ant Design 可编辑单元格，根据antd 3 + antd 4 修改，完全使用状态组件
react-ant design table表格 多级可编辑表格
m0_57553089的博客
07-19 1943
antd-react 3X版本 多级可编辑table
解决react表格嵌套主表和子表都可以新增、编辑、保存、删除
ask_baidu的博客
01-05 1383
作者查阅资料，花了几天时间，解决了多个问题。现分享出来，供大家参考。支持新增行、单行编辑保存、展开、分页国际化；子表格增加、编辑、删除、保存。（包含组件，不包含store）使用后端数据可以把测试数据删除，修改有store的地方，后端返回json，支持分页等。index.js 里有测试数据。
React使用antd实现可编辑单元格
见贤思齐焉，见不贤内自省
02-09 4122
React使用antd实现可编辑单元格
Antd新增、修改的可编辑表格
热门推荐
RuiKe的博客
06-15 1万+
import React, { PureComponent } from 'react'; import { Form, Table, InputNumber } from 'antd'; export default class DTable extends PureComponent { changeInput = (record, value) => { const {...
ant design pro 可编辑表格
wxl095的博客
09-08 1040
import React, {useRef,} from 'react'; import {PageHeaderWrapper} from '@ant-design/pro-layout'; import {ProColumns, ActionType, TableDropdown} from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table'; import {index} from './service'; typ
React 编辑、保存、初始值、模糊搜索select
weixin_37207318的博客
06-28 568
React 编辑、保存、初始值、模糊搜索select
用react实现对表格增删操作
chun835644887的博客
06-22 7906
用react实现对表格操作的demo
antd可编辑行表格的 取消保存不成功 的解决方案
KateCateCake的博客
01-27 3385
这两天在用antd的表格，觉得用可编辑行来做修改功能，很直观，可是放入了实际项目中的数据后，发现取消保存的功能实现不了，仔细排查了原因之后，发现是因为表格的每个数据不是单层的对象，是像下面这种： {flowmeter: {lastday: '', percent: ''}, status: {'...': '...'},...} 而antd做的这个取消保存的功能是针对单层的对象数组的浅层复制，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值