Vue数据驱动表单渲染,轻松搞定form表单

form-create

具有动态渲染、数据收集、校验和提交功能的表单生成器，支持双向数据绑定、事件扩展以及自定义组件，可快速生成包含有省市区三级联动、时间选择、日期选择等17种功能组件。

Github| 文档

form-create 是基于 Vue开发的开源项目，可快速生成 iviewUI 的表单元素。目的是节省开发人员在表单页面上耗费的时间，从而更专注于功能开发。使用 form-creae 可快速、便捷的生成日常开发中所需的各种表单。

下面向大家介绍一下 form-create 使用方法和生成原理

演示

生成器

如何优雅的创建动态生成一个 input 输入框。

内置了规则生成器，用来生成组件规则的助手方法，通过链式操作即可快速生成对应的组件规则。

json

使用 json 数据生成。可通过后端返回生成规则，进行渲染。

php 表单生成器，这是我的另外一个开源项目。通过php生成表单规则，前端可使用 form-create 可直接根据参数进行表单渲染。这样可以很好的做到前后端分离，同时后端也可以很简便的控制表单中的组件和字段。

动态渲染

当生成规则发生变化时，页面也会实时更新。1.5版本新增组件缓存功能,会按需对组件进行更新，很大的提升了渲染速度和性能。

动态渲染实例1

动态渲染实例2

 

自定义组件

form-create 支持生成任意自定义组件，包括嵌套使用 form-create。

举例

在表单中生成一个 iview 按钮组件

生成 elementUI 组件 参考案例

使用自定义组件可提升表单的灵活性,也可以实现功能更复杂的表单。

实现原理

form-create 组件渲染/更新机制图

form-craete 动态渲染表单机制图

以上就是如何使用 form-create 生成表单生成、动态渲染、自定义组件的说明和演示，以及form-create 项目的生成原理和内部结构。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue表单验证你真的会了吗？vue表单验证（form）validate

    前言 很久没有写文章了,学习了一下webpack,基础的一些组件,今天带来form表单验证组件(element.iviewui)的一期教程(作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 (QQ群技术讨论)838293023备注(github进来的 github 技术文档技术文档会持续更新 效果图 1.原理解释 考虑 我们看一下我们可以用form去整体触发校验也可以单个input来触发form-item 进行校验 童鞋们现在可能感觉还是没懂,没关系继续往下看. 2.派发和广播 为什么要用广播

  • vue+elementUI 复杂表单的验证、数据提交方案问题

    当我们在做后台管理系统时,经常会遇到非常复杂的表单: 表单项非常多 在各种表单类型下,显示不同的表单项 在某些条件下,某些表单项会关闭验证 每个表单项还会有其他自定义逻辑,比如 输入框可以插入模板变量.输入字符数量显示.图片上传并显示.富文本 ... 在这种错综复杂的情况下,完成表单的验证和提交 可以查看具体例子:例子中省略了很多琐碎的功能,只保留整体的复杂表单框架,用于展示解决方案 方案1: 在一个 vue 文件中 所有的表单项显示隐藏.验证.数据获取.提交.自定义等逻辑放在一起 v-if/v

  • vue+elementUI实现表单和图片上传及验证功能示例

    vue+elementUI实现表单和图片上传及验证功能示例

    本文实例讲述了vue+elementUI实现表单和图片上传及验证功能.分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1.表单内容的验证及必填项 2.新增和编辑用同一个组件如何处理数据 3.图片需要和信息一起传递(即不允许自动上传) 4.图片必填的验证问题 针对上述问题作出方案: 1.el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-model值保持一

  • vue自定义表单生成器form-create使用详解

    vue自定义表单生成器form-create使用详解

    介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定. 文档| github 演示项目: 开源的高品质微信商城 功能 自定义组件 可生成任何Vue组件 自带数据验证 轻松转换为表单组件 通过 JSON 生成表单 通过 Maker 生成表单 强大的API,可快速操作表单 双向数据绑定 事件扩展 局部更新 数据验证 栅格布局 内置组件17种常用

  • Vue+ElementUI实现表单动态渲染、可视化配置的方法

    动态渲染就是有一个异步的数据,大概长这样: { "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "

  • Vue数据驱动表单渲染,轻松搞定form表单

    Vue数据驱动表单渲染,轻松搞定form表单

    form-create 具有动态渲染.数据收集.校验和提交功能的表单生成器,支持双向数据绑定.事件扩展以及自定义组件,可快速生成包含有省市区三级联动.时间选择.日期选择等17种功能组件. Github| 文档 form-create 是基于 Vue开发的开源项目,可快速生成 iviewUI 的表单元素.目的是节省开发人员在表单页面上耗费的时间,从而更专注于功能开发.使用 form-creae 可快速.便捷的生成日常开发中所需的各种表单. 下面向大家介绍一下 form-create 使用方法和生成

  • 轻松搞定js表单验证

    轻松搞定js表单验证

    先看看效果图: html: 引入 <script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/Validate-1.0.1.js"></script> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head ru

  • 网站被恶意镜像怎么办 php一段代码轻松搞定（全面版）

    有时候你会发现,你在搜索引擎输入网站名称的时候,出来的网站信息是你们的,但是域名却是一个陌生的,这种情况可以基本确定网站被镜像了,那么究竟什么叫网站被镜像? 恶意镜像,也叫恶意克隆,恶意解析,是指有人通过域名 A 记录直接解析别人 IP 地址,从而得到一个在访问者眼中完全相同网站的过程.其工作原理基本上是这样子的:有用户访问镜像站点时,程序就会来正版的站点查询数据,并修改相关链接然后呈献给用户,实质上还是在读取原站的数据.严谨一点的解释:通过复制整个网站或部分网页内容并分配以不同域名和服务器,以

  • Vue导入excel文件的两种方式(form表单和el-upload)

    目录 前言 第一种方法:form表单 一.文件上传的三要素是什么? 二.具体使用步骤 第二种方法:el-upload 总结 前言 两种导入文件的方法:form表单和el-upload 第一种方法:form表单 一.文件上传的三要素是什么? 文件上传的三要素: 表单post请求 input框的type=file 在form表单中添加enctype=“multipart/form-data” 二.具体使用步骤 代码如下(示例): <form action="/" method=&qu

  • JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版

    JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版

    前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能],同时发布了V1.0beta版的快捷留言功能和源代码,之所以是beta版,就是当时感觉虽然基本功能有了,但是还不够完善,特性也不一定合理,今天不知不觉又弄到了这个时候,这次对上一版做了很大改进: 首先,原来自动提交留言信息的同时会自动推荐,大量的推荐数,直接影响了博客园的推荐排名机制,所以后来在第一时间修改成了询问是否要推荐的交互模式! 其次,虽然快捷功能有了,并且很好用,但是满屏幕的"好贴!我顶你!"也确实有些审美疲劳了,并且没什

  • vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能 第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeig

  • 1个文件如何轻松搞定Asp.net core 3.1动态页面转静态页面

    前言 最近一个Asp.net core项目需要静态化页面,百度查找了一下,没有发现合适的.原因如下 配置麻烦. 类库引用了第三方类,修改起来麻烦. 有只支持MVC,不支持PageModel. 继承ActionFilterAttribute类,只重写了OnActionExecutionAsync,看似静态化了,其实运行时该查数据库还是查数据库,没有真正静态化. 缺少灵活性,没有在线更新静态文件方法,不能测试查看实时页面,没有进行Html压缩,没有使用gzip.br压缩文件. 于是我开始了页面静态化

  • 五句话帮你轻松搞定js原型链

    五句话帮你轻松搞定js原型链

    原型链是一种机制,指的是JavaScript每个对象包括原型对象都有一个内置的[[proto]]属性指向创建它的函数对象的原型对象,即prototype属性. 作用:原型链的存在,主要是为了实现对象的继承. 一. 记住以下5句话,轻松搞定js原型链 Function 和 Object 都是构造函数 所有的构造函数都是Function new出来的(Function自己new了自己):所有的原型对象都是Object new出来的(Object new了自己的原型对象) 每一个构造函数都有一个pro

  • python调用文字识别OCR轻松搞定验证码

    python调用文字识别OCR轻松搞定验证码

    今天带你们去研究一个有趣的东西,文字识别OCR.不知道你们有没有想要识别图片,然后读出文字的功能.例如验证码,如果需要自动填写的话就需要这功能.还有很多种情况需要这功能的. 我们可以登录百度云,然后看看里面的接口文档.接口功能还是有比较丰富的应用场景的. # encoding:utf-8 import requests import base64 ''' 通用文字识别 ''' request_url = "https://aip.baidubce.com/rest/2.0/ocr/v1/gene

  • Python轻松搞定视频剪辑重复性工作问题

    Python轻松搞定视频剪辑重复性工作问题

    目录 01 安装 02 剪辑 01 安装 对视频进行批量剪辑,需要三个库,分别是Moviepy库和Pathlib库,还有Tkinter库. 首先我们对这两个库进行安装,命令如下: pip install moviepy pip install pathlib 02 剪辑 上面我们已经安装好所需要的库了,现在开始来对视频进行剪辑操作. 视频剪辑: Moviepy库有一个VideoFileClip函数,将视频传入这个函数后,会返回一个VideoFileClip实例对象,该对象可以被subclip()

随机推荐