issues
search
wwyx778
/
wwyx778.github.io
Jehu's blog
https://wwyx778.github.io
0
stars
0
forks
source link
调研 - 基于 Schema 的动态表单的市场调研
#19
Open
wwyx778
opened
2 years ago
wwyx778
commented
2 years ago
x-render（form-render）
Formily
ProForm
官网
https://x-render.gitee.io/form-render/
https://formilyjs.org/
https://procomponents.ant.design/components/form
开发团队
阿里飞猪
阿里中台
蚂蚁antd团队
开源协议
MIT
MIT
MIT
Star
3.6K
5.7K
1.7K
Downloads
42k 3.1k/month
123k 20k/month
1.2M 198k/month
校验
同 antd 的 async-validator支持正则、函数文档：
https://github.com/yiminghe/async-validator#type
@formily/validator 校验引擎支持正则、函数文档：
https://core.formilyjs.org/api/models/field#fieldvalidator
同 antd 的 async-validator支持正则、函数文档：
https://github.com/yiminghe/async-validator#type
布局
提供预置布局覆盖大部分场景，使用更简单。没有类似插槽概念，对特殊的布局没有很好的扩展
提供 Grid 栅格容器、Space Flex布局容器、Layout 分区块容器，几乎能够满足各种复杂布局
同 antd 布局方式
联动
支持两种方式控制联动逻辑：
1.函数表达式，支持除值、default、rules字段以外的所有字段
2.watch，一种监听的方式控制表单联动，适用于值的联动、复杂表单联动，但是对于自增列表的联动还有些问题：
1.无法动态获取行下标，只能写死
2.无法只修改某一行的schema
支持两种方式控制联动逻辑：
1.x-reactions方式，类似 x-render 函数表达式，支持除值、default、rules字段以外的所有字段
2.提供全局或者单字段的 Effect，一种监听的方式控制表单联动，适用于值的联动、复杂表单联动有完善的路径系统，支持自增列表的动态联动
使用
，但是不可作为 schema 传入，灵活度较低
自定义组件
要求是要有 value/onChange 这两个 props，用于双向绑定值。
需要支持 value/defaultValue/onChange 属性即可快速接入表单。
基于antd ，用 Form.Item 包裹后使用
总结
优点：轻量级，语法基本上都是json，心智负担小，上手快
缺点：自增列表联动逻辑支持不好，布局方式基本固定，复杂联动或者个性化布局需要开发自定义组件
优点：足够灵活，能够适配超复杂联动场景，支持多种布局方式，功能强大。有比较完善的 designable 支持可视化搭建。
https://designable-antd.formilyjs.org
缺点：新引入概念较多，增加使用成本.组件稍重，需引入额外的 @formily/antd 才能较好支持
优点：与antd适配好，同一团队开发，没有心智负担
缺点：功能尚未完善，联动逻辑局限性较大
1.函数表达式，支持除值、default、rules字段以外的所有字段
2.watch，一种监听的方式控制表单联动，适用于值的联动、复杂表单联动，但是对于自增列表的联动还有些问题：
1.无法动态获取行下标，只能写死
2.无法只修改某一行的schema
1.x-reactions方式，类似 x-render 函数表达式，支持除值、default、rules字段以外的所有字段
2.提供全局或者单字段的 Effect，一种监听的方式控制表单联动，适用于值的联动、复杂表单联动有完善的路径系统，支持自增列表的动态联动
缺点：自增列表联动逻辑支持不好，布局方式基本固定，复杂联动或者个性化布局需要开发自定义组件
缺点：新引入概念较多，增加使用成本.组件稍重，需引入额外的 @formily/antd 才能较好支持
缺点：功能尚未完善，联动逻辑局限性较大