form-create 2.5.10 发布，好用的vue动态表单组件

内容简介：form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。 文...

Linux基金会开源软件学园人才激励计划来了，免费培训+考试机会等你报名！>>>>>

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

文档 | GitHub | 示例 |  可视化表单设计器

支持 UI

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

2.5.10主要更新了以下内容:

示例:

通过插槽生成一个表单组件

<template>
<div>
    <form-create :rule="rule" v-model="fApi" :option="options">
        <template slot="type-field-component" slot-scope="scope">
            <ElInput :value="''+scope.model.value" @input="(v)=>scope.model.callback(parseInt(v))" />
        </template>
    </form-create>
</div>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit: (formData)=>{
                        alert(JSON.stringify(formData))
                    },
                },
                rule:[
                    {
                        type:'fieldComponent',
                        field:'fieldComponent',
                        title:'自定义插槽',
                        value:100
                    }
                ]
            }
        }
    }
</script>

scope数据结构

interface scope {
    rule:Rule; //组件生成规则
    prop:VNodeData; //on: 事件, props: 配置
    children: Vnode[] //子级
    model: { //定义field后才有
        value: any; //表单组件 value
        callback: (value:any)=>void; //表单组件 value 更新
    };
};

安装

根据自己使用的 UI 安装对应的版本

element-ui 版本

npm i @form-create/element-ui

iview@2.x|3.x 版本

npm i @form-create/iview

iview/view-design@4.x 版本

npm i @form-create/iview4

ant-design-vue@1.5+ 版本

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

快速上手

本文以element-ui为例

1. 在 main.js 中写入以下内容：

import Vue from 'vue'
import ELEMENT from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import formCreate from '@form-create/element-ui'

Vue.use(ELEMENT)
Vue.use(formCreate)

1. 生成表单

在线示例

<template>
  <div id="app1">
      <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create>
  </div>
</template>

export default {
    data() {
        return {
            //实例对象
            fApi: {},
            //表单数据
            value: {},
            //表单生成规则
            rule: [
                {
                    type: 'input',
                    field: 'goods_name',
                    title: '商品名称'
                },
                {
                    type: 'datePicker',
                    field: 'created_at',
                    title: '创建时间'
                }
            ],
            //组件参数配置
            option: {
                //表单提交事件
                onSubmit: function (formData) {
                    alert(JSON.stringify(formData))
                }
            }
        }
    }
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

关注我们，获取更多IT资讯^_^

查看所有标签

• Form 表单组件的设计之路
• [ Laravel 5.7 文档 ] 基础组件 —— 表单验证
• 检查Angular2表单是否在组件内有效
• form-create 2.5.1 发布，强大的动态表单组件
• 支持嵌套对象、多级数组的Vue动态多级表单组件 —— vue-dynamic-form-component
• 表单 – 避免Symfony强制显示表单字段

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。