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

文档 | 源码

3.0.0 版本主要更新了以下内容:

  • 适配 vue3

  • 适配 element-plus 和 ant-design-vue3.0

  • 功能于 2.5.12 版本一致

移除配置项

  • attrs
  • scopedSlots
  • domProps
  • hook
  • nativeOn
  • nativeEmit

功能调整

  • 修改 validatevalidateFieldsubmit 返回值, 返回Promise
  • 修改 v-model 为 v-model:api
  • 修改 value.sync 为 v-model

不兼容项

  • 不支持 iview
  • 移除 template 模板方式生成组件
  • 移除 formCreate.init 方法

支持UI

  • element-plus
  • ant-design-vue

功能

  • 支持 Vue3 版本

  • 支持2个 UI 框架

  • 通过 JSON 生成表单

  • 自定义组件

    • 可生成任何Vue组件
    • 自带数据验证
    • 可快速扩展
    • 轻松转换为表单组件
  • 全局配置

    • 可以设置表单配置
    • 可以设置指定组件全局配置
    • 可以设置所有组件公共的全局配置
  • 自定义配置项扩展,快速根据业务逻辑扩展

  • 支持组件设置前后缀

  • 支持规则之前联动更新

  • 强大的API,可快速操作表单

  • 双向数据绑定

  • 事件扩展,事件注入

  • 局部视图更新

  • 数据验证

  • 栅格布局

  • 嵌套对象,数组组件

  • 内置组件

    • hidden
    • input
    • inputNumber
    • checkbox
    • radio
    • switch
    • select
    • autoComplete
    • cascader
    • colorPicker
    • datePicker
    • timePicker
    • rate
    • slider
    • upload
    • tree
    • frame
    • group
    • subForm/object

图例

安装

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

element-plus 版本

 npm i @form-create/element-ui@next 

ant-design-vue@3.0 版本

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

快速上手

本文以element-ui为例

  1. 在 main.js 中写入以下内容:
import ElementUI from 'element-plus/es/index'
import 'element-plus/dist/index.css'
import formCreate from '@form-create/element-ui' app.use(ElementUI)
app.use(FormCreate)
  1. 生成表单

在线示例

<template>
<div id="app1">
<form-create v-model:api="fApi" :rule="rule" :option="option" v-model="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))
}
}
}
}
}

form-create 3.0 版本发布,好用的Vue3版本动态表单生成组件的更多相关文章

  1. Form表单验证组件

    Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...

  2. vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)

    对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...

  3. 【开源】开发者新闻聚合APP 2.0.3发布(第二个稳定版本)

    聚合了博客园新闻.infoq新闻.36kr新闻.oschina新闻.51cto新闻.csdn新闻: 争取做到随时刷随时有开发者的新闻! 目前还只支持安卓APP 但用的人多了,我会发布苹果版的APP 最 ...

  4. Vue2.0表单校验组件vee-validate的使用

    vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 n ...

  5. antd做form表单的组件共用,利用mapPropsToFields填写默认值

    做单页应用,不管是用Vue还是React,或者其他,有一个重要的原则,就是:组件重用. 既然组件可以重用,那么当添加一个信息,和修改该信息的布局必然是一致的,这时候,最好的方法自然是利用同一个组件,在 ...

  6. 【开源】开发者新闻聚合APP 1.0.3发布(第一个稳定版本,短期内不再发布新版本)

    聚合了博客园新闻.infoq新闻.36kr新闻.oschina新闻.51cto新闻.csdn新闻: 争取做到随时刷随时有开发者的新闻! 目前还只支持安卓APP 最新版本的下载地址:https://gi ...

  7. yii2.0 Activeform表单部分组件使用方法 [ 2.0 版本 ]

    文本框:textInput(); 密码框:passwordInput(); 单选框:radio(),radioList(); 复选框:checkbox(),checkboxList(); 下拉框:dr ...

  8. Spark版本发布历史,及其各版本特性

      2016年11月5日 We are proud to announce that Apache Spark won the 2016 CloudSort Benchmark (both Dayto ...

  9. yii2.0 Activeform表单部分组件使用方法

    文本框:textInput(); 密码框:passwordInput(); 单选框:radio(),radioList(); 复选框:checkbox(),checkboxList(); 下拉框:dr ...

随机推荐

  1. FastAPI 学习之路(七)字符串的校验

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  2. pycharm设置文件中显示模板内容

    pycharm中设置自己的文件模板  File>>Settings>>Editor>>File and Code Templates 选择文件类型或者输入文件类型 ...

  3. MarkDown之Typora使用

    Typora:所见即所得 常用快捷键 加粗:ctrl + B 标题:ctrl + 16,对于与16级标题 插入公式:ctrl + Shift + m 插入代码:ctrl + Shift + K 插入图 ...

  4. 如何再一台电脑上配置多个tomcat同时运行

    1.配置运行tomcat 首先要配置java的jdk环境,这个就不在谢了  不懂去网上查查,这里主要介绍再jdk环境没配置好的情况下 如何配置运行多个tomcat 2.第一个tomcat: 找到&qu ...

  5. [no code][scrum meeting] Beta 11

    $( "#cnblogs_post_body" ).catalog() 例会时间:5月26日11:30,主持者:肖思炀 下次例会时间:5月27日11:30,主持者:乔玺华 一.工作 ...

  6. VUE调用子窗口弹窗或组件弹窗,关闭弹窗刷新父级页面主页面,通过this.$emit来实现

    this.$emit是父级向自己传值 第一步在父级页面创建自己页面的引用 <template> <div> <edit ref="edit" @ref ...

  7. Linux零基础之shell基础编程入门

    从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 Shell脚本编程,完成更加复杂的操 ...

  8. Nginx(二):Nginx的四层(L4)和七层(L7)负载均衡

    OSI七层模型 和 TCP/IP四层模型 四层负载均衡( L4 Load Balancing ) 四层负载均衡,主要通过报文中的目标地址和端口,再加上负载均衡设备设置的服务器选择方式,决定最终选择的内 ...

  9. vue-router 4 你真的熟练吗?

    虽然 vue-router 4 大多数 API 保持不变,但是在 vue3 中以插件形式存在,所以在使用时有一定的变化.接下来就学习学习它是如何使用的. 一.安装并创建实例 安装最新版本的 vue-r ...

  10. 【java+selenium3】时间控件 (九)

    1.问题描述: 在应用selenium实现web自动化时,经常会遇到处理日期控件点击问题,手工很简单,可以一个个点击日期控件选择需要的日期,但自动化执行过程中,完全复制手工这样的操作就有点难了. 如图 ...