element-form-builder - Build element-ui forms with JSON Schema.

Vue Form Builder Build powerful vue form with JSON schema and composition api. Any custom input components and popular ui frameworks such as Element U

Information

Category: Vue.js / Form Generator
Watchers: 16
Star: 377
Fork: 46
Last update: May 23, 2023

Resource links

https://openfext.github.io/vue-form-builder

https://github.com/openfext/vue-form-builder

Vue Form Builder

Build powerful vue form with JSON schema and composition api. Any custom input components and popular ui frameworks such as Element UI, View UI, Ant Design Vue are supported.

🇺🇸 English | 🇨🇳 简体中文

Features

📺 Powerful - use composition api to manage complex form state
📷 Flexible - support any custom input components
⌚ Adaptable - different ui frameworks can be used out of the box through the adapters
📻 Reliable - has been used in multiple applications in the production environment

Example

⚡ Live Preview | 📖 Element UI Storybook | 📖 View UI Storybook | 📖 Ant Design Storybook

Docs

🇨🇳 Chinese

🇺🇸 English

WIP...

Contacts

Welcome to join the group chat to discuss project issues and front-end technologies 💬

QQ

ChatID: 667576147

WeChat Group

Add the author's WeChat to get into the group:

Built With

License

MIT

7 Open More issues

Closed

在JSON输入框中手动加入新的表单项，表单项无法正常输入

作者您好：

我clone了本项目中的/examples/simple-demo在本地运行起来之后。

往中间的JSON输入框中，手动新增了新的表单项。

//old
[
    {
        "tag": "el-input",
        "item": {
            "label": "标题"
        },
        "detail": {
            "name": "title",
            "defaultValue": "默认标题"
        }
    },
    {
        "tag": "el-input",
        "item": {
            "label": "描述"
        },
        "detail": {
            "type": "textarea",
            "name": "desc",
            "placeholder": "请填写一个精彩的描述",
            "rows": 3
        }
    },
    {
        "tag": "el-date-picker",
        "item": {
            "label": "日期"
        },
        "detail": {
            "name": "date",
            "placeholder": "请选择日期",
            "valueFormat": "yyyyMMdd"
        }
    },
    {
        "tag": "el-radio",
        "item": {
            "label": "地区"
        },
        "detail": {
            "name": "area",
            "items": [
                {
                    "text": "北京",
                    "label": "1"
                },
                {
                    "text": "上海",
                    "label": "2"
                },
                {
                    "text": "广州",
                    "label": "3"
                },
                {
                    "text": "深圳",
                    "label": "4"
                }
            ]
        }
    },
    {
        "tag": "el-checkbox",
        "item": {
            "label": "主题"
        },
        "detail": {
            "name": "subject",
            "items": [
                {
                    "text": "历史",
                    "label": "1"
                },
                {
                    "text": "战争",
                    "label": "2"
                },
                {
                    "text": "科幻",
                    "label": "3"
                },
                {
                    "text": "爱情",
                    "label": "4"
                },
                {
                    "text": "文艺",
                    "label": "5"
                },
                {
                    "text": "生活",
                    "label": "6"
                }
            ]
        }
    },
    {
        "tag": "el-select",
        "item": {
            "label": "标签"
        },
        "detail": {
            "name": "tag",
            "multiple": true,
            "items": [
                {
                    "label": "温暖",
                    "value": "1"
                },
                {
                    "label": "感动",
                    "value": "2"
                },
                {
                    "label": "刺激",
                    "value": "3"
                },
                {
                    "label": "紧张",
                    "value": "4"
                },
                {
                    "label": "有爱",
                    "value": "5"
                },
                {
                    "label": "搞笑",
                    "value": "6"
                }
            ]
        }
    }
]

//new
[
    {
        "tag": "el-input",
        "item": {
            "label": "标题"
        },
        "detail": {
            "name": "title",
            "defaultValue": "默认标题"
        }
    },
    {
        "tag": "el-input",
        "item": {
            "label": "描述"
        },
        "detail": {
            "type": "textarea",
            "name": "desc",
            "placeholder": "请填写一个精彩的描述",
            "rows": 3
        }
    },
    {
        "tag": "el-date-picker",
        "item": {
            "label": "日期"
        },
        "detail": {
            "name": "date",
            "placeholder": "请选择日期",
            "valueFormat": "yyyyMMdd"
        }
    },
    {
        "tag": "el-radio",
        "item": {
            "label": "地区"
        },
        "detail": {
            "name": "area",
            "items": [
                {
                    "text": "北京",
                    "label": "1"
                },
                {
                    "text": "上海",
                    "label": "2"
                },
                {
                    "text": "广州",
                    "label": "3"
                },
                {
                    "text": "深圳",
                    "label": "4"
                }
            ]
        }
    },
    {
        "tag": "el-checkbox",
        "item": {
            "label": "主题"
        },
        "detail": {
            "name": "subject",
            "items": [
                {
                    "text": "历史",
                    "label": "1"
                },
                {
                    "text": "战争",
                    "label": "2"
                },
                {
                    "text": "科幻",
                    "label": "3"
                },
                {
                    "text": "爱情",
                    "label": "4"
                },
                {
                    "text": "文艺",
                    "label": "5"
                },
                {
                    "text": "生活",
                    "label": "6"
                }
            ]
        }
    },
    {
        "tag": "el-select",
        "item": {
            "label": "标签"
        },
        "detail": {
            "name": "tag",
            "multiple": true,
            "items": [
                {
                    "label": "温暖",
                    "value": "1"
                },
                {
                    "label": "感动",
                    "value": "2"
                },
                {
                    "label": "刺激",
                    "value": "3"
                },
                {
                    "label": "紧张",
                    "value": "4"
                },
                {
                    "label": "有爱",
                    "value": "5"
                },
                {
                    "label": "搞笑",
                    "value": "6"
                }
            ]
        }
    },
   {
        "tag": "el-input",
        "item": {
            "label": "姓名"
        },
        "detail": {
            "name": "name"
        }
    }
]

结果发现新增的input无法正常输入，疑似双向绑定异常。

但是在您的在线预览中却不存在这个问题https://element-form-builder.now.sh/

期待得到您的恢复，谢谢...

help wanted question

opened Mar 5, 2019 by 719034075 7

Closed

表单元素不支持绑定事件？

enhancement

opened Oct 9, 2019 by nntaoli 3

Closed

When I pass in v-model formValues with values the library empties them. I would like to be able to pass formValues with data. I have used the input event to make this mechanism, but I think the library should admit it.

opened Dec 12, 2019 by Themesaul 2

Closed

请问支持表单直接的级联操作吗？如果支持该如何使用？

question

opened May 11, 2020 by god-of-war-jgc 1

Closed

build(deps): bump acorn from 5.7.3 to 5.7.4

Bumps acorn from 5.7.3 to 5.7.4.

Commits

6370e90 Mark version 5.7.4
fbc15b1 More rigorously check surrogate pairs in regexp validator
See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies

opened Mar 15, 2020 by dependabot[bot] 1

Closed

How build `Mixed input`?

How a create https://element.eleme.io/#/en-US/component/input#mixed-input

@felixpy

opened Feb 27, 2020 by batazor 1

Open

English Version of Documentation

Hi, when can We expect the English version of the documentation?

opened Nov 29, 2021 by Djaangoo 0

Open

ElFormAdaptor无法使用

Bug Report

Affected Feature

真的很想知道为什么一直爆这个问题，抄的栗子还报这个错误 ElFormAdaptor ` Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> at src/views/Home.vue at src/App.vue ` 难道我的注册方法不对？

Is this a regression

Description

Minimal Reproduction

Exception or Error

Your Environment

Vue Version:

Vue Composition API:

Anything else relevant?

opened Dec 26, 2020 by cv936669367 1

Open

can it support vuetify？

Feature Request

Relevant Package

Description

Describe the solution you'd like

Describe alternatives you've considered

enhancement

opened Oct 29, 2020 by radiorz 2

Open

Fail to serve on NuxtJS

Bug Report

Description

The guideline seems broken on Nuxt setup.

Minimal Reproduction

Fresh project from yarn create nuxt-app, using options:

SSR
ElementUI

Exception or Error

Must use import to load ES Module: <skip>/node_modules/vue-runtime-helpers/dist/normalize-component.mjs

Updated on 14/11/2020:

Above exception can be resolved by adding the libraries to nuxt.config.js transpile section:

  build: {
    transpile: [
      /^element-ui/,
      /^vue-runtime-helpers/,
      /@fext\/vue-form-builder/,
      /@fext\/vue-use/,
    ],
  },

However, it seems the composition api not working correctly (this/context)

Your Environment

Vue Version:

2.6.11

Vue Composition API:

1.0.0-beta.10

NuxtJS Version

2.14.0

Node Version

v12.18.3

bug

opened Aug 18, 2020 by xgenvn 3

Open

Support Vuetify component framework

Feature Request

Relevant Package

Form Adaptor

Description

Support Vuetify since it is a very popular Material Design component framework.

Describe the solution you'd like

Add Vuetify component adapter.

Describe alternatives you've considered

Not yet.

enhancement feature request

opened Jun 18, 2020 by felixpy 0

Open

⚡ 技术交流讨论组

欢迎加入群聊讨论项目问题和前端技术 💬

QQ

群号：667576147

微信群

加作者微信进群：

opened Jun 18, 2020 by felixpy 0

2.1.0(May 31, 2020)

Features

add View UI adaptor
add Ant Design Vue adaptor

Source code(tar.gz)
Source code(zip)

2.0.2(May 24, 2020)

Bug Fixes

builder created by factory method is not compiled

Source code(tar.gz)
Source code(zip)

2.0.1(May 24, 2020)

Chore

update dependencies
remove sourcemap

Source code(tar.gz)
Source code(zip)

2.0.0(May 24, 2020)

Version 2.0 is now available!

Features

Powerful - use composition api to manage complex form state
Flexible - support any custom input components
Adaptable - different ui frameworks can be used out of the box through the adapters
Reliable - has been used in multiple applications in the production environment

Source code(tar.gz)
Source code(zip)

2.0.0-alpha.2(May 24, 2020)

Bug fixes

runtime dependencies

Source code(tar.gz)
Source code(zip)

2.0.0-alpha.1(May 24, 2020)

v2: new implementation using composition api

Features

FormBuilder
Element UI Form Adaptor

Source code(tar.gz)
Source code(zip)

vue-form-builder Online Demovue-form-builder - Build powerful vue form with JSON schema and composition api, popular ui frameworks such as Element UI, View UI, Ant Design Vue are supported. Online Demo

🧞 Convert JSON Objects to MySQL, JSON Schema, Mongoose, Google BigQuery, Swagger, and more.

Designable - 🧩 Make everything designable 🧩 Such as form builder/table builder/chart builder/app builder etc.

A fluent builder Schema.org types and ld+json generator

Dynamic nested forms using jQuery made easy; works with formtastic, simple_form or default forms

Edit JSON in UI form with JSON Schema and Vue.js

Form Builder - Json template based form builder, based on Vue and Laravel.

JSON Schema Editor - An intuitive editor for JSON schema. Develop with Vue.js 2 and Firebase.

'json-node-normalizer' - NodeJS module that normalize json data types from json schema specifications.

A lightweight go library for parsing form data or json from an http.Request.

Magic Forms is used to auto generate form schema data based on a GraphQL introspection data call.

vue-form-generator A schema-based form generator component for Vue.js.

vue-form-generator - A schema-based form generator component for Vue.js.

form-create - Form builder with dynamic rendering, data collection, validation, and submission capabilities, supporting json data

The fastest JSON Schema Validator. Supports draft-04/06/07

:sunny: A tool for validating data using JSON Schema and converting JSON Schema documents into different data-interchange formats

Generate tables dynamically from a JSON Schema and insert data

Build powerful vue form with JSON schema and composition api.

🔥 Webpack plugin which tracks changes in your schema and generates its introspection in `json` and `txt` formats

Generate complex, validated and extendable JSON-based forms in React.

Boilerplate for creating a custom element.

Share this repo

Related Repos

Form Generator

No one likes the drudgery of building form logic. Banish it with F#.

FormSharp This is very much work in progress - here be killer bunnies, but they're quickly being pacified FormSharp aims to take the drudgery out of c

Form Generator

A powerful online form designer for Vue.

Form Generator

Base on Vue 3.x, Quickly generates custom form configuration interfaces using JSON Schema.

Form Generator

2.2k

Vue Formulate - The easiest way to build forms with Vue. Validation, error handling, form ...

Documentation Website What is Vue Formulate? Vue Formulate is the easiest way to build forms with Vue. Please read the comprehensive documentation for

Form Generator

1.2k

ncform - a very nice configuration generation way to develop form

ncform 中文版 ncform, a nice form development way that generates form UIs and their interactions with just configuration. Comes with standard components

Form Generator

123

vue-form-components - Clean & minimal vue form elements with validation

Vue Form Components Documentation https://antonreshetov.github.io/vue-form-components Install NPM Installing with npm is recommended and it works seam

Form Generator

vue-awesome-form - A vue.js component just like json-editor

vue-awesome-form a vue form component just like json-editor Install # npm/yarn npm install vue-awesome-form yarn add vue-awesome-form Use register th

Form Generator

vue-autofocus-directive - Vue autofocus directive.

vue-autofocus-directive Autofocus directive for Vue About Lifted from the official Vue tutorial: https://vuejs.org/v2/guide/custom-directive.html When

Form Generator

120

Form Builder - Json template based form builder, based on Vue and Laravel.

Forms JSON-based Form builder for Laravel Enso This package can work independently of the Enso ecosystem. The front end implementation that utilizes t

Form Generator

2.9k

vue-form-generator - A schema-based form generator component for Vue.js.

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example CodePen simple example Features reactive forms bas

Form Generator

410

vue-focus - A reusable focus directive for reusable Vue.js components.

vue-focus A reusable focus directive for reusable Vue.js components Overview It can be tricky to manage input focus. You always have to fall back to a

Form Generator

236

vue-formly - JavaScript powered forms for Vue.js.

Vue Formly Vue Formly is a JS based form builder heavily inspired by Angular Formly. Vue Formly was designed to provide an easy way to keep your forms

Form Generator

377

vue-form-builder Online Demovue-form-builder - Build powerful vue form with JSON schema an...

Vue Form Builder Build powerful vue form with JSON schema and composition api. Any custom input components and popular ui frameworks such as Element U

Form Generator

2.9k

vue-form-generator A schema-based form generator component for Vue.js.

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example CodePen simple example Features reactive forms bas

Form Generator

851

vue-ele-form - Vue DataForm, based on element-ui

vue-ele-form | 基于 element-ui 的数据驱动表单组件说明 vue-ele-form 是基于 element-ui form 的二次封装, 主要特点: 内置 20 多种表单类型, 包括选单选、多选、标签、级联选择器等; 拥有上传图片增强, 上传视频增强, 上传文件增强,树形下