基于Vue.js、JSONSchema和ElementUi快速生成表单,支持自定义组件,支持自定义错误提示配置和校验规则...源码:vue-json-schema-formgithubdemo表单:vue-json-schema-formDemo生成表单如下图:什么是JSONSchemaJSONSchema定义了一套描述你的数据格式的规范,包括对数据结构的描述和约束等各种开发语言都有相应的类库来支持模式验证。JSONSchema示例:{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","required":["userName"],"properties":{"userName":{"type":"string","title":"UserName","default":"Name"},"age":{"type":"integer","title":"Age","maximum":80,"minimum":16},"bio":{"type":"string","title":"Bio","minLength":10}},"additionalProperties":false}上面的模式描述了一个包含三个属性的对象:userName、age和bio。userName是字符串类型,age必须定义为整数类型,在16到80之间。Bio是一个长度不小于10的字符串。正确示例{userName:'name',age:18}×错误示例-(biolengthisnotlessthan10){userName:'name',age:18,bio:'heyhey'}更多信息请参考JSONSchema官方文档:https://json-schema.org/under...JSONSchemaformgeneration通过JSONSchema生成form表单,数据校验基于ajv,只需要一个schema参数即可生成完整可校验的form表单。JSONSchematitle属性用作表单表单的标题。JSONSchema描述属性用作表单的描述。可以通过uiSchema配置在个性化的视图展示中,也可以直接配置在JSONSchema中。可以在errorSchema中配置,用于验证表单的错误副本,也可以直接在JSONSchema或uiSchema中配置,支持多语言,支持自定义组件,自定义样式……具体可以参考上面的github链接.表单渲染流程大致如下图所示。基于组件递归的形式,逐步渲染用户信息录入的简单示例:
