FormRender是阿里巴巴飞猪中后台表单开箱即用解决方案,官方给的介绍是像写一个input一样写表单。大概功能通过JSON配置就能够生成出表单,这在实际业务上还是很有作用的,比如客户要加个字段去改源码太费劲了,并且性能比手动循环渲染的性能强。
FormRender依赖antdesign,单独使用不要忘记同时安装antd,就是说这个解决方案只适用于antd组件,结构上使用了JSONSchema国际规范。
支持校验rules
拓展props
内置组件
高级用法
表单联动(比如勾选某个表单项触发显示或隐藏出另一个)
自定义组件(widget)
覆盖默认组件(mapping)
表单方法(form)跟antdfrom方法一样获取值,校验值,设置值
表单监听(watch)
生命周期(加载-提交)
列表的展示
展示的最佳实践设置标签宽度/位置
远程加载数据
比如配置个Select组件,但是数据源想从服务端取,可以在onMount中使用form.setSchemaByPath来实现。
图形化表单设计器
官方也开源了fr-generator表单设计器,可以自行集成到项目里
npmifr-generator
同样也提供了可视化编辑器的VSCode插件版本
FormRender的功能基本能满足90%的表单,如果有特别需求的还是手动实现,也可以通过阿里的另一款formilyjs实现,不过formilyjs学习成本比较高。
相关链接:
项目