一、ModalForm销毁

配置了modalProps={{ destroyOnClose: true }}，弹框在隐藏时会销毁，同时清除原有数据。

二、ModalForm编辑赋值

首先发现有一个初始值赋值方法initialValue，但是使用后一直显示原来的值，这样就无法使用，但是在第一步，配置了销毁ModalForm，那么每次打开弹框都是新赋的值，这样就解决了初始值不变的问题。

添加页的弹框大部分都不需要初始值，就无需处理，主要是列表编辑页面，参考TableList的方法，点击列表编辑按钮时，使用currentRow给表单赋值即可，如果不配置销毁，那初始值只会赋值一次，每次点开编辑弹框，都是第一次点开的值，配合上销毁ModalForm，可以每次给表单重新赋值，这样编辑页问题整个都解决了。

列表编辑按钮给currentRow赋值

编辑弹框ModalForm的销毁和初始化赋值

三、ProFormUploadButton赋值

经过测试，给ProFormUploadButton赋值有三种方式：

1、fieldList：原upload组件的赋值方式

2、value：upload组件转换成ProFormUploadButton后的赋值方式

3、initialValue：form组件默认的赋值方式

经测试，三种方式都可以显示图片，但是前两种图片显示后，删除操作失效了，也许因为未知的原因，但我测试的时候点击删除无反应，也无法重新选择图片，第三种方式确认可行，可正常显示，也可删除后重新选择图片上传。

赋值的格式参考官网给出的格式，给出四个参数就可以[{uid:'-1'，name:'xxx.png'，status:'done'，url:'http://xxxxx.com/xxx.png'}]

四、其它

ProFormRadio.Group配置默认值，注意可选值类型和默认值类型要保持一致，我这里没有保持一致纠结了好长时间。

错误写法：设置人员性别，可选值value加了引号，initialValue设置后一直不显示选中的值

去掉引号，默认值就选中了

另外新发现，ModalForm里面的组件，不管是ProFormText、ProFormTextArea、ProFormRadio等等，必须设置名字，name="xxx"，否则都赋不上值。

ModalForm的使用相关推荐

用C#来开发CAD插件，含源代
CAD插件看起来很神秘,其实一个合格码农经过几天就能快速掌握.没什么秘密,开发CAD插件和winform一样简单,多学几个类库用法就是,在CAD里展现界面和winform略有不同.学习CAD插件开发的 ...
一.jquery.datatables.js表格显示
2014年8月10日星期日使用jquery.datatables.js取后台数据. 1.html代码 <table class="dataTables-example"&g ...
【代码片段】base样式--针对bootstrap
/* Document : base.cssCreated on : 2013-02-22Author : KojyaDescription : Style sheet for base. *//* ...
有关 Form 的一些代码的标准写法
有关 Form 的一些代码的标准写法时间:2009-10-23 21:00:05来源:网络作者:未知点击:44次有关 Form 的一些代码的标准写法----------------------- ...
CRMEB后台前端文档说明
命名页面目录文件夹命名格式骆驼式命名法,例如:用户列表 userList 例如:商品模块 product 商品 ├─ product 商品管理 ├─productList 商品管理目录 ├- in ...
在.NET中进行AutoCAD二次开发(C#+ObjectArx) (二)
Autodesk官方最新的.NET教程(五)(C#版) 第 5 章用户互操作:提示和选择背景提示通常包含一个描述性信息,伴随一个停止以让用户理解所给的信息并输入数据.数据可以通过多种方式被输入, ...
ant jeecg vue 前端通过dom节点导出xlsx表格
点击导出 : 效果图: 上代码安装依赖:npm install xlsx@0.17.0 file-saver@2.0.5 --save xlsx要指定版本不然会报错 <template& ...
Echarts 空运图和海运图以中国为中心的地图中英文地图切换
前言: 图1是第一版本,又做出了整改,整改也会放在下面,对地图对航线对海运线等做出的一些调整. 简单的概述一下,并把中英文地图的坐标点,以及以中国为中心的json放在后 ...
vue + element 实现主页面，主页面查询，新增模态框功能
效果图一.[主页面]list.vue <template><div class="externalUsers">&l ...

ModalForm的使用

一、ModalForm销毁

二、ModalForm编辑赋值

三、ProFormUploadButton赋值

四、其它

ModalForm的使用相关推荐

最新文章

热门文章