ant Modal 上的EditableProTable编辑数据后，再次打开弹窗数据依然还在

最新推荐文章于 2023-12-04 16:58:11 发布

原创

最新推荐文章于 2023-12-04 16:58:11 发布 · 994 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #react.js

在使用Modal组件时，由于子组件EditableProTable未被正确销毁，导致关闭后再打开弹窗，之前输入的数据仍然存在。通过添加`destroyOnClose`属性到Modal，确保子组件在关闭时被销毁，从而解决数据保留的问题。另外，使用不同的`key`也可实现相同效果，防止组件状态被保留。

1.代码

    <Modal
      width={1200}
      maskClosable={false}
      title="返修单确认"
      keyboard={false}
      open={show}
      <

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

南城夏季

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

解决Antd Tree组件，二次点击时不取消选中，保持高亮

IT飞牛

06-12

2863

然而大多数业务场景下，我们希望多次点击同一个节点不会取消他的选中效果。支持点击高亮树节点，再次点击取消高亮。

ant-design-draggable-modal:Ant Design的Modal，可拖动

05-02

yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react-dom@16.8.0或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' ...

参与评论您还未登录，请先登录后发表或查看评论

react使用antd表单（Form）放在弹窗（Modal）里，resetFields失效，关闭弹窗后再次打开，表单的值还是上一次，如何解决？

AngkorWhat的博客

07-06

1637

【ant.design】react使用antd表单（Form）放在弹窗（Modal）里，resetFields失效，关闭弹窗后再次打开，表单的值还是上一次，如何解决？

Ant Design Pro使用之--EditableProTable 可编辑表格

热门推荐

weixin_62192841的博客

10-27

1万+

EditableProTable 可编辑表格的一些些总结和实践，对于其相关属性：recordCreatorProps和editable及columns配置写了些自己的理解，以作记录和参考

antd 关闭弹窗组件后再次打开里面还有上次的值

xin915的博客

02-22

2542

使用destroyOnClose ={true} 可以再弹窗关闭时清空里面的值具体请看对话框 Modal - Ant Design

【ant-design-vue】a-select无法清空的解决

bbt953的博客

09-05

3232

a-select无法清空的解决

vue打开子组件弹窗都刷新功能的实现

10-14

在Vue框架中，实现打开子组件弹窗时自动刷新功能是一项常见的需求，特别是在构建具有交互性的用户界面时。本文将详细讲解如何实现这一功能，通过具体的代码实例进行演示。首先，我们关注`vue打开子组件弹窗都刷新`...

Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案

08-31

如果尝试在已打开的模态窗口中再次打开另一个模态，可能会因为事件绑定和堆叠顺序的冲突导致新模态无法正常显示。在提供的代码示例中，可以看到两个具有相同 ID（`feature-mapping-dialog-form`）的 modal 元素。...

Bootstrap modal只加载一次数据的解决办法(推荐)

08-28

我们也可以在每次打开 Modal 之前移除数据，以便让 Modal 在每次打开时重新加载数据。下面是一个简单的示例代码： ```javascript $("#myModal").on("show", function() { $(this).removeData("modal"); }); ``` ...

antd表单的ProTable组件为可编辑表格时，数据源改变但是表格没重新渲染

小蓝人的博客

10-10

1255

/去掉dataIndex后只要dataSource变化，则dom就一定会渲染。

element中表格，表单等等重置之后依然显示上一次的数据

CHENC0518的博客

03-15

1155

1.造成这个问题的原因就是因为深拷贝和浅拷贝的问题，只需要对赋值的数据进行深拷贝即可。

弹窗里面显示表格打开一次后，以后table不会变化（刷新）的问题

qq_46490956的博客

02-21

1435

弹窗里面显示表格打开一次后，以后table不会变化（刷新）的问题

destroyOnClose设置后依旧没有清除Form表单数据

springLilly的博客

01-18

1870

默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 destroyOnClose。和 Form 一起配合使用时，设置 destroyOnClose 也不会在 Modal 关闭时销毁表单字段数据，需要设置。 Modal.method() RTL 模式仅支持 hooks 用法。 ...

iView页面Modal中内嵌Tabs，重新显示Modal时默认选中Tabs的第一项

weixin_33845881的博客

12-17

1078

文档中说激活面板的name用value，页面第一次加载的时候可以，放在modal里就不好使了，每次打开的时候总显示上一次离开时的界面。真正能用的是this.$refs.tabs.activeKey = 'name1'，此方法也可以动态设置Tabs页面。 html： <Modal v-model="modal.visible" width="80%" transfer :tit...

ProComponents EditableProTable使用

qq_29050279的博客

05-26

925

【代码】ProComponents EditableProTable使用。

antd pro component - EditableProTable 表单重置

wangming0123的博客

07-29

4751

antd pro component - EditableProTable 受控情况之下，改变 dataSource之后，但是表格编辑组件还是记录上次编辑状态记录的数据，没有及时更新，解决办法就是手动更新表单（其实整个表格就是一个form）开始干活，上代码！(代码直接从项目摘出来的，看起来有点乱，核心部分都在） // 声明form实例 const [form] = Form.useForm(); console.log('打印formValues：',form.getFieldsVal

react 使用antd（4.x） Modal关闭弹框清空数据问题

fankeweiii的博客

03-30

4340

react 使用antd Modal关闭弹框清空数据问题

如何解决编辑数据取消后表格数据也会变(数据库没变）

m0_50871330的博客

04-09

401

在前端修改框赋值时写这段代码即可：JSON.parse(JSON.stringify(row))可以用JSON.parse（JSON.stringify（item））这种方式转化。问题如果直接赋值就会造成原数据的改变。

antdPro中EditableProTable可编辑表单编辑行配置可变下拉框选项和赋值其他字段

KisJLLLLLL的博客

12-04

2449

EditableProTable根据上一个下拉框选择的人物来进行对后一个下拉框选项进行变更，并在选中某个人后通过接口对后面的两个字段进行赋值，一开始是准备在onChange中改变下拉框中的options配置，colums中的renderFormItem来自定义字段，并且在点击单位名称的时候来通过useMemo进行对负责人下拉选项的重新渲染，和在负责人中获取整个表单数据并且进行重新替换赋值。但是不同字段赋值是可以在columns中通过onChange中的hooks来进行双向绑定进行赋值。

Ant Design Vue打开modal时重新加载table的数据