antd 与 element-plus 的 form 模型

antd 的 form 模型

antd 的 form 模型实际上是需要建立 formModel 的。
内建里 form model 来完全控制整体表单各个表单项的值。有defaultValues 用来做初始化的默认值。且提供 resetFieldsValue 来让你初始化数据模型。
统一了每个form model item 的接口，使用value onChange来统一收发数据更新。
这样子的会使得我们使用formModel时变得简单一些
例如
常见的表单场景为新增编辑查看
完成这三态场景的表单会较为简单。
新增即对form model resetFields即可
编辑即对form Model setValues即可
本质上还是内部维护了一个form store来代理所有的form store change
validate 自然去跟 form store做校验即可

element-plus的form 模型

element plus 的form 模型其实比较弱。
原因vue并不需要实现formModel。onchange与value都可以通过v-model利用外部form store来处理。
而element plus 的form 构建的一层model只是做validate以及一点resetFields
validate用的库 async-validate 实际上与antd 的validate库一直，所以两者在rule的注册方式，具体rule的设置方式上，都大同小异。
但因为其并无实现form store在表单组件中，使得其form是没有明确的initialFormData的。
这就导致了 resetFieldsValue 只能是某些时机时的snapshot value.在某些时候使用reset时候会导致与预期不相符的现象。

我认为在antd上的使用要更为舒服一些。
可以让表单随意进入编辑态，初始态。
而vue要达到这一点其实也不难，只需要外置再构建一份form store 来作整个form 的上层使用即可。

Comments

发表评论取消回复

邮箱地址不会被公开。必填项已用*标注

名称 *

电子邮件 *

站点

在此浏览器中保存我的姓名、电子邮件和站点地址。

antd 与 element-plus 的 form 模型