form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON

Overview

form-create

MIT github document

form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports 3 UI frameworks, and supports the generation of any Vue components. Built-in 20 kinds of commonly used form components and custom components, no matter how complex forms can be easily handled.

中文 README

Support

  • iview
  • view-design
  • element-ui
  • ant-design-vue

If you have a form component suitable for form-create, please feel free to click here to leave a message

If it helps, you can click on "Star" in the upper right corner. Thank you! The project is still being developed and improved. If there are any 'recommendations or questions, please ask here

本项目QQ讨论群28963712

Update log

  • Preview

demo1

More
  • Form operations

description

demo2

  • group component

description

demo3

  • control configuration

description

demo2

Docs

简体中文 | English

Packages

Name Description
@form-create/iview version npm iview version
@form-create/iview4 version npm view-design version
@form-create/element-ui version npm element-ui version
@form-create/ant-design-vue version npm ant-design-vue version

Example

Legend

https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg

Install

iview

npm install @form-create/iview

view-design

npm install @form-create/iview4

element-ui

npm install @form-create/element-ui

ant-design-vue

npm install @form-create/ant-design-vue

Import

CDN:

iview


<script src="//vuejs.org/js/vue.min.js">script>

<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">

<script src="//unpkg.com/iview/dist/iview.min.js">script>

<script src="//unpkg.com/@form-create/iview/dist/form-create.min.js">script>

element-ui


<script src="//vuejs.org/js/vue.min.js">script>

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://unpkg.com/element-ui/lib/index.js">script>

<script src="//unpkg.com/@form-create/element-ui/dist/form-create.min.js">script>

ant-design-vue


<script src="//vuejs.org/js/vue.min.js">script>

<link href="https://unpkg.com/[email protected]/dist/antd.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/zh-cn.js">script>

<script defer src="https://unpkg.com/[email protected]/dist/antd.js">script>

<script src="//unpkg.com/@form-create/ant-design-vue/dist/form-create.min.js">script>

NodeJs:

iview

import formCreate from '@form-create/iview'
Vue.use(formCreate)

element-ui

import formCreate from '@form-create/element-ui'
Vue.use(formCreate)

ant-design-vue

import formCreate from '@form-create/ant-design-vue'
Vue.use(formCreate)

Usage

<form-create :rule="rule" v-model="fApi" :option="options" :value.sync="value"/>
export default {
    data(){
        return {
            fApi:{},
            value:{field1:'111',field2:'222',time:'11:11:11'},
            options:{
                onSubmit:(formData)=>{
                    alert(JSON.stringify(formData))
                }
            },
            rule:[
                {type:'input', field:'field1',title:'field1',value:'aaa'},
                {type:'input', field:'field2',title:'field2',value:'sss'},
                {type:'timePicker', field:'time',title:'time',value:'12:12:12'},
                {
                    type:'ElButton',
                    title:'Modify field1',
                    native: false,
                    on:{
                        click: ()=>{
                            this.rule[0].value+='a'
                        }
                    },
                    children: ['Click'],
                }
            ]
        }
    }
}

Demo

Download project

$ git clone https://github.com/xaboy/form-create.git
$ cd form-create

Install dependencies

$ npm run bootstrap

iview Demo

$ npm run dev:iview

view-design Demo

$ npm run dev:iview4

element-ui Demo

$ npm run dev:ele

ant-design-vue Demo

$ npm run dev:antd

Thank

时光弧线 | wxxtqk | williamBoss | HeyMrLin | djkloop | JetBrains

Donation

donation.jpg

Contact

email : [email protected]

License

MIT

Copyright (c) 2018-present xaboy

Comments
  • 怎么批量修改group下item的rules

    怎么批量修改group下item的rules

    版本号 (version)

    1.0.20

    使用的 UI 框架

    element-ui

    问题描述 (Issue)

    怎么批量修改group下item的rules 目前这样修改不是很便捷

    $f.updateRules({
      "filed": {
        props: {
          button: false,
          disabled: true,
          rules: [
            {
              children: [
                {props: {disabled: true}},
                {props: {disabled: true}},
                {props: {disabled: true}},
                {props: {disabled: true}},
                {props: {disabled: true}}
              ]
            }
          ]
        }
      }
    });
    
    新的需求 
    opened by nimiumiu 15
  • 用vue-cli使用有问题呀

    用vue-cli使用有问题呀

    我在项目下 npm install --save form-create

    然后在main.js中 引入并使用 import formCreate from 'form-create' Vue.use(formCreate)

    居然报 This dependency was not found:

    • form-create in ./src/main.js

    To install it, you can run: npm install --save form-create

    请问这是什么原因呢

    bug 
    opened by wxxtqk 11
  • [Bug] control's handle function is not working

    [Bug] control's handle function is not working

    版本号 / version

    @form-create/[email protected]

    UI 框架的版本

    [email protected]

    问题描述

    control: [
      {
          handle: function (val) {
             console.log("didn't show in console")
             return Boolean(x)
          },
          rule: [...]
      }
    ]
    

    复现步骤

    [
      {
        field,
        type: 'select',
        options: ['asd', 'dsa'],
        control: [
          {
            handle: x => {
              console.log("didn't show in console")
              return Boolean(x)
            },
            rule: [
             {
                filed: 'xxx',
                type: 'select',
                options: ['progressbar', 'fraction']
              }
            ]
          }
        ]
      }
    ]
    

    期望的结果

    但handle function 沒有反應,期望要有反應,且xxx select要出現 :) ~ 如果用value 是正常的

    opened by lustan3216 9
  • 在select类型中,给on-query-change事件加上emitPrefix后,事件无效

    在select类型中,给on-query-change事件加上emitPrefix后,事件无效

    1.0.3

    "@form-create/element-ui": "^1.0.3",
    

    "element-ui": "2.11.0",

    在select类型中,给query-change事件加上emitPrefix后,事件无效

    比如articleno-query-change

    期望query-change加了emitPrefix以后还能生效

    opened by CandiceCaiYu 9
  • group 里的disabled属性无效吗?

    group 里的disabled属性无效吗?

    https://jsrun.net/NQhKp/edit 这里面把 function mock() 里的演示组件替换为下面内容,input框设置为禁用,但没效果,用的是iview4

    {
        "type": "group",
        "field": "label",
        "value": [{
                "testf1": "否"
            }
        ],
        "props": {
            "rules": [{
                    "title": "是否f1",
                    "type": "input",
                    "field": "testf1",
                    "value": "否",
                    "props": {
                        "disabled": true
                    },
                    "col": {
                        "span": 12
                    }
                },
            ]
        }
    }
    
    opened by muziling 8
  • fApi.fields()无法获取表单字段

    fApi.fields()无法获取表单字段

    2.5.0-alpha.2

    element-ui

    2.12.0

    在表单加载完成后,使用fApi.fields()函数无法获取表单字段,返回值为[]。(通过fApi.form验证,表单实际有字段)

    在全局配置中,使用mounted属性,在函数中输出fApi.fields()。(规则文件较大,不便展示) 当将规则简化为如下形式后,仍存在此问题。

    [
        {
          type: 'input',
          field: 'projectBase-projectNum',
          title: '选题序号'
        },
        {
          type: 'input',
          field: 'projectBase-projectName',
          title: '项目名称'
        }
    ]
    

    使用fApi.fields()函数可以获取表单字段

    opened by canomh 8
  • form inline true 出现 样式错乱问题

    form inline true 出现 样式错乱问题

    1.0.16

    element-ui

    2.13.2

    form inline true 模式

    表单 都是 display:inline-block 1.提交和重置按钮是浮动,导致布局样式出错。 2.slider ui也出错

    例子example 里的 element-ui 自行修改 即可复现

    布局样式正常,表单无问题

    尽快修改

    opened by 672064406zerui 8
  • upload组件 props对象中的listType 默认为 picture-card,更改为text 后,上传成功后 fileList中不显示文件名

    upload组件 props对象中的listType 默认为 picture-card,更改为text 后,上传成功后 fileList中不显示文件名

    版本号 (version) 
    @form-create/ant-design-vue  3.x
    

    问题描述 (Issue) upload组件 props对象中的listType 默认为 picture-card,更改为text 后,上传成功后 fileList中不显示文件名 1668679699862

    #复现步骤/生成规则 (Duplicate steps/generate rules) rule : { type: 'upload', title: field.fieldName, field: field.fieldCode, value: [], props: { limit: extJson.data || 1, type: extJson.controlType, listType: extJson.controlType === 'pic' ? 'picture-card' : 'text', headers: headers, accept: accept, action: sysConfig.API_URL + '/dev/file/uploadLocalReturnUrl', // 上传成功回调函数 onSuccess: function (file) { console.log(file) if (file.response.result) { file.url = file.response.result } } }, children: extJson.controlType === 'pic' ? [] : [{ type: 'a-button', props: { type: 'dashed', block: true }, children: ['点击上传'] }] }

    期望的结果 (Desired outcome) listType:'text' 的时候 上传成功后显示的 列表 能够显示 文件名

    opened by thpngj 1
  • vue2 安装报错

    vue2 安装报错

    vue2 安装报错

    import formCreate from '@form-create/element-ui'; Vue.use(formCreate);

    element-UI版本:2.15.10

    引入后发现报错 Uncaught TypeError: vue.createElementVNode is not a function

    看了源码,代码里用的是element-plus ,这个应该是vue3的组件库 这边应该修改文档制定版本号

    opened by ryan0562 1
  • next 分支 运行 npm run bootstrap 报错

    next 分支 运行 npm run bootstrap 报错

    版本号 (version) v3.1.16

    UI 框架的版本 (UI version) element-plus

    问题描述 (Issue)

    image

    复现步骤/生成规则 (Duplicate steps/generate rules)

    1. clone源码
    2. 目录下运行 npm run bootstrap

    期望的结果 (Desired outcome) 能够正常运行并继续往后的步骤

    opened by byc233518 2
Dynamic schema-based form rendering for VueJS

FormVueLate 2.0 (Vue 3) Visit FormVueLate 3.0's full documentation for more detailed information and examples. Getting Started FormVueLate is a zero d

FormVueLate 436 Nov 7, 2022
Generate Vue Forms and Data-tables fast with a simple JSON-like syntax ⚡️

Blitzar Generate Vue Forms and Data-tables fast with a simple JSON-like syntax ⚡️ npm i blitzar Documentation Vue 3 blitzar.cycraft.co Vue 2 blitzar0.

CyCraft 89 Nov 3, 2022
Generate a form using JSON Schema and Vue.js

FormSchema Native Vue component form based on JSON Schema and Native HTML This is the branch for @formschema/native 2.0 Alpha, not ready for productio

FormSchema 456 Nov 27, 2022
Generate form based on standard json-schema and customize it using ui-schema

FFV Form For Vue Generate form based on standard json-schema and customize it using ui-schema Installation npm install --save ffv Usage Bundler (Webpa

null 2 Aug 23, 2019
Laravel Enso Form Builder is a customizable, template based form creator, so you can quickly create forms with the minimum amount of effort

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

Laravel Enso 118 Nov 15, 2022
Render fully customizable dynamic form with form-field conditional logic.

Ionic Vue Form Render fully customizable dynamic form with form-field conditional logic. Install npm install ionic-vue-form

Simo Mafuxwana 3 Oct 21, 2022
Automatic form generation for Vue.

Automatic form generation for Vue. Inspired by Formly, but as idiomatic Vue. Making use of the awesome Vuelidate library, rather than re-inventing a new validation solution.

Formival 1 Apr 27, 2021
Learn how to create badass dynamic forms with Vue.js in this course

Dynamic Forms with Vue.js This repository contains the example code for the Custom Vue.js Directives Course. Learn how to create badass dynamic forms

Sergey Shmatovskiy 2 Jul 26, 2022
📝 A JSON configuration Render form Component for Vue.js and Element-UI

?? A JSON configuration Render form Component for Vue.js and Element-UI

4Ark 4 Nov 4, 2020
Generate a vue form with validation from an array

vue-form-json Generate a vue form with validation from an array All fields are required and input text by default. Once submitted, an event 'formSubmi

null 92 Sep 30, 2022
Build powerful vue form with JSON schema and composition api.

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

FE Next 374 Nov 23, 2022
Build powerful vue form with JSON schema and composition api.

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

FE Next 374 Nov 23, 2022
Super Form Builder built on top of Vue with Drag & Drop functionality, savable-form-schema and easy to maintain/upgrade your form.

agape-form-builder forked by vue-form-builder A simple builder to help you generate a super form for your features/modules/sites,... Easy to use, crea

Ágape Consultoria 0 Apr 5, 2021
Vue Form Components - Clean & minimal vue form elements and form builder with validation

Vue Form Components - Clean & minimal vue form elements and form builder with validation

null 0 Nov 5, 2019
Vue Form 是一套基于 JSON Schema 使用 Vue.js 自动生成表单的库

Vue Form Vue Form 是一套基于 JSON Schema 使用 Vue.js 自动生成表单的库。 特性 使用 JSON Schema 校验表单(基于ajv) 使用 Form Definition 简化表单类型、属性、顺序定义 实现了常见的表单元素 支持数组动态增减、上下拖拽移动 支持编

null 41 Oct 26, 2022
A JSON Scheme parse for Form with Element-UI

vue-form A JSON Scheme parse for Form with Element-UI support switch,input,input-number,select,radio,checkbox,date components. support minimun,maximun

null 2 Aug 10, 2021
Cheetah Forms - An Json Based Form Generator for Vuetify

Cheetah Forms is a simple JSON form builder for generating a Vuetify Form with just a JSON

null 12 May 5, 2021
https://json-drived-configurable-platform.github.io/form-generator-iview

form-generator-iview description A form generator with json schema based on iview ui. design developer zhengxkq, BingBlog, longkele xiaomiCat, changyu

null 6 Feb 15, 2022
A Form Render Based on JSON Schema for Vue

vue-schema-render A Form Render Based on JSON Schema for Vue Features 内置 ElementUI 组件 支持自定义组件 支持自由布局 支持样式覆盖 支持多语言 支持列表组件拖拽 支持无限嵌套表单以及嵌套校验,自定义校验规则 支持组件

Hisheng 3 Jan 1, 2022