lljj-x / Vue Json Schema Form
Licence: apache-2.0
基于Vue/Vue3，Json Schema 和 ElementUi/antd/iview3 等生成 HTML Form 表单，用于活动编辑器、h5编辑器、cms等数据配置；支持可视化生成表单Schema 。 Generate a form using Vue/Vue3, Json Schema and ElementUi/antdv/iview3
Stars: ✭ 300
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Json Schema Form
Ncform
🍻 ncform, a very nice configuration generation way to develop forms ( vue, json-schema, form, generator )
Stars: ✭ 1,009 (+236.33%)
Mutual labels: json-schema, form
Json Forms
JSON Schema to HTML form generator, supporting dynamic subschemas (on the fly resolution). Extensible and customizable library with zero dependencies. Bootstrap add-ons provided
Stars: ✭ 549 (+83%)
Mutual labels: json-schema, form
Vue Form Builder
Build powerful vue form with JSON schema and composition api.
Stars: ✭ 325 (+8.33%)
Mutual labels: json-schema, form
react-jsonschema-formbuilder
No description or website provided.
Stars: ✭ 45 (-85%)
Mutual labels: json-schema, form
Form Render
🚴♀️ 阿里飞猪 - 很易用的中后台「表单 / 表格 / 图表」解决方案
Stars: ✭ 3,881 (+1193.67%)
Mutual labels: json-schema, form
Formily
Alibaba Group Unified Form Solution -- Support React/ReactNative/Vue2/Vue3
Stars: ✭ 6,554 (+2084.67%)
Mutual labels: json-schema, form
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (-15.67%)
Mutual labels: json-schema, form
scalable-form-platform
A solution for building dynamic web forms with visual editor
Stars: ✭ 109 (-63.67%)
Mutual labels: json-schema, form
fform
Flexibile and extendable form builder with constructor
Stars: ✭ 26 (-91.33%)
Mutual labels: json-schema, form
Form Create
🔥🔥🔥 强大的动态表单生成器|form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON.
Stars: ✭ 3,698 (+1132.67%)
Mutual labels: form
Jsonschema
golang implementation of https://json-schema.org drafts 7 & 2019-09
Stars: ✭ 267 (-11%)
Mutual labels: json-schema
Waitme
jquery plugin for easy creating loading css3/images animations
Stars: ✭ 302 (+0.67%)
Mutual labels: form
Vue Form Builder
Super Form Builder built on top of Vue with Drag & Drop functionality, savable-form-schema and easy to maintain/upgrade your form.
Stars: ✭ 292 (-2.67%)
Mutual labels: form
Formvuelar
Vue form components with server-side validation in mind
Stars: ✭ 263 (-12.33%)
Mutual labels: form
Jsonschema
JSONSchema (draft04, draft06, draft07) Validation using Go
Stars: ✭ 261 (-13%)
Mutual labels: json-schema
Jsonschema
An implementation of the JSON Schema specification for Python
Stars: ✭ 3,474 (+1058%)
Mutual labels: json-schema
vue-json-schema-form
基于 Vue2 / Vue3、 JSON Schema 生成带完整校验的Form表单，你的 🌟 🌟 🌟 就是最大的支持
查看文档 - Playground - 可视化表单Schema生成器
ui框架支持
交流群
QQ群：146845780 ，欢迎入群讨论
如何启动相关编辑器页面
1、 安装依赖
yarn install
2、 同时运行 Playground/表单Schema生成器/活动编辑器
# Playground http://127.0.0.1:8800/
# 可视化表单Schema编辑器 http://127.0.0.1:8800/schema-generator.html
# （H5）活动编辑器 http://127.0.0.1:8800/vue-editor.html
yarn run demo:dev
3、 单个运行（指定entry编译更快）
# 只运行 Playground
yarn run demo:dev --dir=index
# 只运行 表单Schema生成器
yarn run demo:dev --dir=schema-generator
# 只运行（H5）活动编辑器
yarn run demo:dev --dir=vue-editor
说明
- 遵循
JSON Schema规范，只需要给定JSON Schema，即可生成对应的form表单 - 快速配置个性化ui视图和校验错误信息，可适配常用的ui库
- 表单schema校验使用 ajv
- 设计思想和对schema解析索引参考 react-jsonschema-form
相关资料
为何开发
在做前端可视化编辑时，为了解决数据配置表单的通用性，所以使用 JSON Schema 描述数据结构，动态生成表单。
这样做的好处除了解决在每个配置表单的重复工作，服务端也可以基于同一份schema保持和前端一致的校验规则，不过对于使用 vue elementUi并未找到合适库可以直接使用，所以在后面一段时间决定自己实现一个 。
问题或建议
有任何使用问题或者建议都可以通过 Github issue 提交给我
License
Apache-2.0
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].