Form升级为FormModel用法

最后更新于:2022-04-02 07:15:33

## FormModel 表单 (支持 v-model 绑定)(Ant Design of Vue 版本:1.5.0+) [TOC] ### 新版form特性 - 1、支持双向绑定 - 2、无需v-decorator这个反人类属性设置 - 3、form用法跟目前主流框架(element ui iview风格形成统一,不在另类) - 4、表单赋值无需手动设置,双向绑定自动赋值 ### 新老form用法对比 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/39/0b/390bc788053e66e11ba92b1d087994f1_1845x816.png) 标签规则升级 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/10/b6/10b636555cc5ec7f19cdad4e6573558c_1798x514.png) 校验规则区别 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/8e/99/8e99190e52f21df00a76a928502a7dbf_1866x555.png) 表单赋值区别 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/a0/fa/a0faeae320544b086b1ed6d73218e3a8_1625x436.png) 表单提交区别 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/bf/b8/bfb8a62523d13209c20fa5beb39478b9_1656x551.png) ### 代码案例分析 角色管理老版form代码 ``` ~~~ ``` 角色管理新版from代码 ``` ``` ### 注意:这里有大坑 ~~~ this.$refs.form.resetFields(); ant-design-vue官方文档声明 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果 但是实际form绑定的model无法清除原始值。所以添加页面和编辑页面的时候,一定先清空,再设置默认值。 ~~~ 千万不要这么写 ~~~ this.edit(this.model) ~~~ ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/dd/89/dd89e94e4fa7efeb23f8310cbbd96453_1108x206.png) ### 官方文档 [官方FormModel用法](https://www.antdv.com/components/form-model-cn/)
';