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