表单

腾小云导读 兴许你经验过这种状况：产品和设计同学用一句话就把需要说完了，你抓破脑袋做进去的版本又达不到他们的要求。不如尝试让 AI 承当苦楚，让它了解、拆解并实现一句话需要？本篇作者尝试提出一个主动配置可视化零碎，通过主动生成表单解决上述痛点。欢送浏览～ 目录 1 简介 2 AI 生成 DSL 2.1 链路拆分 2.2 Few Shot 2.3 仿冒发言 2.4 调优计划 3 实时推送 3.1 开发阶段 3.2 本地 Proxy 代理 3.3 Nginx 反向代理4 总结 01、简介很多时候可视化零碎是用于团队晋升效率的利器，但无论使用者是产品运维还是开发者，都会遇到这样的问题：产品运维要配置可视化零碎，有肯定的应用配置老本。开发者要了解需要，又有肯定的沟通老本。如果 AI 比你更会配置，也比你更容易懂“一句话需要”那会怎么样呢？ 比方上面的两个例子，收到制作表单的需要时只有一句话： “我想生成互联网职业调研”——将这句需要输出，会生成以下成果，零碎主动补充了具体需要如：“年龄”、“性别”、“职业状态”、“最关怀的互联网畛域”、“工作教训”、“学历”、“毕业院校”、“毕业工夫”。 “我想要一个任天堂调研”——将这句需要输出，会生成以下成果，零碎主动补充了具体需要如：“是否领有任天堂游戏机”、“最喜爱的任天堂游戏”、“最喜爱的游戏类型”、“最喜爱的游戏平台”。 从下面两个案例看的进去，主动生成的表单能满足根本的需要。 当然，你在失常工作时会收到十分明确的需要。这时你很明确本人想要什么，AI 就会依据你的需要进行输入，尽量不去做更多的拓展。 “生成一个仙剑奇侠传的调研，我想晓得粉丝的年龄段散布，性别，想晓得他们最爱哪个系列，提供一些最喜爱的角色给粉丝抉择”——将这句具体需要输出，会生成以下成果：“年龄段”、“性别”、“最喜爱的系列”、“最喜爱的角色”。 整个展现流程：AIGC 是零代码的体现，可视化零碎则是低代码的体现。但互联网没有银弹：零代码的自由度非常受限，拓展性无奈满足用户。 低代码通常须要内置大量的业务属性的模版，来升高用户的初始应用老本。 数据更新接入的模型是 gpt-3.5-turbo，须要一些实时数据时依然生成的是过往的旧数据。AIGC 的能力是能够很好地补救这两头的 GAP，AIGC 负责依据理论的用户需要来输入模版，而后用户就在生成的模版根底上进行局部的批改来满足最终的需要。 转化到技术侧就是，AI 依据需要去生成满足可视化零碎的 DSL 后，并导入到可视化零碎中 。当咱们明确咱们须要 AI 实现的指标，下一步就是如何去做了。 02、AI 生成 DSLDSL 是由人类对特定畛域进行形象的描述语言，在表单引擎这里则是 JSON Schema。要达到最终的 AI 生成 DSL 的目标，我认为有上面几个关键点： ...

一、背景前端开发中波及表单的页面十分多，看似性能简略，开发疾速，实则占去了很大一部分工夫。当某个表单蕴含元素过多时还会导致html代码过多，vue文件过大。从而不容易查找、批改和保护。为了进步开发效率及升高保护老本，上面介绍表单配置化组件的封装原理与封装办法。 二、技术计划 如上图所示，封装表单配置化组件的关键点有三个一是如何解决表单元素排布的行列问题，二是表单数据的绑定问题，三是表单元素的参数配置校验等问题。上面别离介绍这三个问题的解决办法。 •配置化表单组件的入参及阐明 参数阐明类型可选值默认值labelWidth表单元素label所占宽度String——150pxcolumnList表单元素所组成的配置，是一个数组Array——[]formData表单元素值的汇合Object——{}columnSpan表单排布分栏Number——24size表单元素尺寸Stringmedium / small / minimedium•计算配置化表单的行数，本表单通过根底的24分栏计算表单最终的行数和列数，通过上面办法最终失去一个对于行列的二维数组 newColumnList() { const newColumnList= [] const row = Math.floor(24 / this.columnSpan) let newColumnItem = [] for(let i=0; i< this.columnList.length; i++) { newColumnItem.push(this.columnList[i]) if(newColumnItem.length === row || i === this.columnList.length-1) { newColumnList.push(newColumnItem) newColumnItem = [] } } return newColumnList}•通过下面失去的二维数组进行循环渲染，首先循环渲染行，其次循环渲染列。本计划采纳element中的表单，当然也能够用其余组件库或者原生表单进行渲染，其原理通用。最终将会依据参数column.type决定加载哪一个具体的表单元素。 <el-form ref="form" :model="formData" :label-width="labelWidth" :size="size"> <el-row :gutter="20" v-for="(element,index) in newColumnList" :key="index+'formRow'"> <template v-for="(item, index) in element" > <column :key="index + 'formView'" :columnSpan="columnSpan" :column="item" :formData="formData" /> </template> </el-row></el-form>•column组件最终依据type加载具体的表单元素。上面展现column组件的入参及其阐明，通过component加载不同的表单元素 ...

Foxnic-Web 代码生成 (6) —— 配置字段的表单组件概述 上一篇中咱们讲述了字段配置的通用项，本篇将具体介绍字段的表单编辑器配置。针对不同的表单编辑器，能够指定不同的代码生成参数。默认状况下，代码生成会依据表字段的类型等信息主动匹配一个表单组件。当然，开发人员也能够手动指定每个字段的表单组件类型。 尽管表单组件是出现在表单界面的，然而它的设置同样会影响搜寻区域对应的条件输入框。搜寻区域的条件输入框组件按肯定的规定与表单组件对应。本文将一一介绍表单组件以及它们的代码生成配置项。 本文中的示例代码均可在 https://gitee.com/LeeFJ/foxni... 我的项目中找到，本文对照 webfull 我的项目解说。 残缺示例 因为，每个组件的配置较多，本篇也不能齐全一一列举，提供 Foxnic-Web 我的项目下有一各种组件反对的残缺示例，请大家参考： https://gitee.com/LeeFJ/foxni...单行文本框 单行文本框是大多数状况下字段的默认组件。通过 view.field(XXX).form().textInput() 办法指定，默认搜寻框为单行文本框。它的配置项有： 配置项阐明defaultText指定默认文本多行文本框 多行文本框通过 view.field(XXX).form().textArea() 办法指定，默认搜寻框为单行文本框。它的配置项有： 配置项阐明defaultText指定默认文本height指定文本框高度数值输入框 数值输入框通过 view.field(XXX).form().numberInput() 办法指定，默认搜寻框为数值输入框。它的配置项有： 配置项阐明allowNegative是否容许正数，默认容许decimal指定为小数输入框integer指定为整数输入框defaultValue默认值range数值范畴scale小数位step滚轮步长按钮组件按钮组件通过 view.field(XXX).form().button() 办法指定。它的配置项有： 配置项阐明action指定默认文本chooseOrganization关上组织抉择对话框chooseCompany关上公司抉择对话框chooseDepartment关上部门抉择对话框chooseEmployee关上员工抉择对话框choosePosition关上岗位对话框复选框复选框组件通过 view.field(XXX).form().checkBox() 办法指定，默认搜寻框为下拉框。它的配置项有： 配置项阐明defaultValue指定默认选中的值defaultIndex指定默认选中的序号enumType指定选项为枚举类型dict指定选项为数据字典单选框单选框组件通过 view.field(XXX).form().radioBox() 办法指定，默认搜寻框为下拉框。它的配置项有： 配置项阐明defaultValue指定默认选中的值defaultIndex指定默认选中的序号enumType指定选项为枚举类型dict指定选项为数据字典下拉框下拉框组件通过 view.field(XXX).form().selectBox() 办法指定，默认搜寻框为下拉框。它的配置项有： 配置项阐明defaultValue指定默认选中的值defaultIndex指定默认选中的序号enumType指定选项为枚举类型dict指定选项为数据字典fillWith指定用哪个属性的数据填充下拉框的已选值filter是否应用过滤性能muliti配置为是否多选paging是否分页size分页大小queryApi指定取数的 API 地址valueField设置值列名textField设置显示列名toolbar是否应用工具栏日期抉择框日期抉择框通过 view.field(XXX).form().dateInput() 办法指定。它的配置项有： 配置项阐明format格局,如: yyyy-MM-dd HH:mm:ss , yyyy-MM-dd默认，为自动识别defaultNow设置默认值为以后工夫renderAtTop为防止 iframe 区域太小而被遮挡，可设置改值使其弹出框显示在 iframe 之外 ; 默认 falseSwitch组件Switch 组件通过 view.field(XXX).form().logicField() 办法指定。它的配置项有： 配置项阐明defaultValue指定默认文本on设置开启(逻辑真)状态下的标签与值off设置敞开(逻辑假)状态下的标签与值文件上传组件文件上传组件通过 view.field(XXX).form().upload() 办法指定。它的配置项有： 配置项阐明acceptAllType容许上传任意类型的文件acceptAudioType仅容许上传音频acceptImageType仅容许上传图片acceptSingleFile仅容许上传单个文件acceptSingleImage仅容许上传单个图片acceptVideoType仅容许上传视频acceptMime容许上传的MimeacceptExts容许上传的文件扩展名buttonLabel文件浏览按钮的显示文本displayFileName是否显示文件名maxFileCount最大文件数量小结 本节列举了 Foxnic-Web 目前曾经反对的全副表单组件。表格中的每个配置办法都蕴含若干参数，因为篇幅限度不能一一列举每个办法内参数的用法，大家能够按 JavaDoc 提醒指定参数值。 ...

hi 维格星球的居民们，vika维格表最近有一些大的动作和小的扭转，vikaby 作为课代表，给大家梳理了不能错过的几个大事件： 1. vika维格表将在 8 月 31 日 24:00 完结公测，全新的免费版、付费版能够戳这里查看详情 2. 为了回馈始终以来关注、应用维格表的用户，咱们推出了《公测完结倒计时，「友」福同享》流动，当初分享维格表给好友，有机会赢取 iPhone 12 等好礼，详情戳这里。 划重点：在流动期内注册的用户都将收费取得 3 个月的白银级空间噢~ 3. 维格表 7 月也在默默更新了许多性能，有新的变动，也有小的优化，但总体上放弃着综合全面、平衡成长，请大家释怀~ 好了~ 大事件播报就到这里~ 明天也是致力的 vikaby 这次也带来 7 月版本更新的全部内容—— 更新一览：1、开发者核心 beta 版上线，更多精彩玩法等你来解锁2、收集表更名「神奇表单」，必填项、列形容等性能增强，带来专业级的表单体验3、「附件」图片预览体验优化，无论什么图片、怎么看都难看4、挪动端反对表内查找戳视频理解详情https://www.bilibili.com/vide... 开发者核心 beta 版上线vika.cn/developersvika维格表是一款面向 API 的智能多维表格，通过 API 接口，与不同平台、业务零碎连贯，实现数据的高效流转。对于维格表 API 的应用阐明，这次一起打包放在了全新的「维格表开发者核心」。 在维格表开发者核心，你将能疾速查阅到 API 的教程文档，理解目前反对的 API 接口，同时通过指南里的 cURL、Python SDK、JavaScript SDK 示例疾速把握 API 接口的调用形式，自在地、个性化地搭建工作流。 将来，小组件 SDK 、自动化脚本的教程文档以及更新日志也将同步更新在这里，充沛实现：你的维格表怎么玩、长什么样，由你决定。 如果说维格表的将来状态是一款高自由度的「沙盒游戏」，那么「开发者核心」肯定是你解锁「新地图」玩法的钥匙。 想通过维格表一展拳脚的开发者壮士们，能够继续关注、纵情摸索「维格表开发者核心」喔~ 不过，开发者核心目前仍是 beta 版，咱们会不定期更新的啦~ 神奇表单上线专业级的表单体验7 月更新中，「收集表」正式更名为「神奇表单」，继神奇关联、神奇援用后，vika维格表的「神奇家族」又添新成员。 维格表作为一款多维表格，领有弱小的「变形」能力，「表单」只是其中不值一提的一种（不是）。 绝对于其余电子表单来说，维格表领有：不必二次设计、数据信息不必二次汇总等显著劣势。 ...

小到在部门群里收团体建聚餐的意见，大到考察整个社区人员的疫苗接种状况，还有诸如科创比赛项目信息、流动人员信息汇总等，咱们在生存和办公场景中常常会碰到信息收集的需要。 然而，信息收集偏偏不是随随便便发个表给人填写就能实现的事件，它是一件技术活。 不信？思考以下这些技术要点，你是否可能解决： 如何将 Excel 表格，无需拖拽主动生成收集表或表单？如何让尽可能多的指标人群填写上交？如何确保收集到的信息数据精确如愿？如何在收集信息的同时，保障数据安全？如何从收集到的海量信息，不必二次解决，在一个平台主动生成数据分析？在线表单工具千千万，好用的却永远稀缺。让你的小脑瓜先进行思考，没必要比照寻找能一一攻克的解决方案。 因为在 vika 维格表的「神奇表单」背后，这都不是事儿～ vika 维格表「神奇表单」演示图 什么是神奇表单？在开始正式介绍之前，咱们先补充一个概念：到底什么是「神奇表单」？ 神奇表单，是一种基于维格表中的维格视图，主动匹配、疾速生成的信息收集利用。它能够用来疾速收集信息，并主动汇总收集后果到表格中进行整顿和剖析，用在比方产品需要收集、人员信息收集、销售进度收集等理论业务上。 值得一提的是，神奇表单的字段与数据结构，与所选的「维格视图」保持一致。 也就是说，一张神奇表单对应着一个维格视图。你能够在一张维格表里，通过不同的视图，去创立不同的神奇表单，从而实现多种业务场景。 至于神奇表单有多神奇？多好用？怎么用？让维卡比带你一探到底～ 神奇表单的神奇之处一键生成，双向互转 只有有一张表格，你就能一键转化生成用于收集信息的在线表单。 而通过表单收集到的信息，又会实时回流到表格之中进行汇总，实现表单表格的双向互转。 神奇吗？要不怎么叫做「神奇表单」呢。 神奇表单可一键生成 神奇表单尽管也是在线表单工具，却在逻辑构造上与传统表单有实质上的不同，或者说翻新。 看看传统表单，就更神奇了 传统表单通过不同组件进行组合，它的填写与前期进行汇总剖析做成表格的过程是割裂的，相当于你要做 2 次设计：组件与问题搭配 & 统计表格搭建。 传统电子表单款式 而对于神奇表单而言，不存在这样的问题，表格就是它的信息储存器： 每张神奇对应一个表格视图； 神奇表单的每个问题与表格的每一列，无论是内容还是程序都一一对应。 表单与表格各元素前后对立，填写与汇总实时一步到位，引起舒服。 神奇表单制作简略两步，掌控全局 假如当初有这样一个场景： 公司的行政或者人事想制作一个员工名册，须要收集员工的详尽信息进行汇总整顿，那要如何用神奇表单来解决？只有简略两步，就能实现神奇表单的制作： 第一步：根据需要，设计表格 首先，咱们新建一张维格表。 接着布局列举这个员工名册中应该蕴含的信息点，为其匹配相应的维格列数据类型，比方文本、数字、电话等，包含反对照片、证件等附件上传。 拓展常识：你能够利用神奇表单进行材料文件的收集和归档，这张汇总的维格表就相当于一个曾经分门别类且自带详细描述的云盘文件夹和数据库，非常弱小。 第二步：抉择视图，一键生成 表格设计好之后，即可一键生成神奇表单。在 vika 维格表中，有 3 种神奇表单的主动生成形式： 左侧工作目录上的「+」—— 即新建维格表的地位；作为视图展示的一种模式，在新增视图的地位找到入口；维格表视图中也有「神奇表单」的按键入口。 神奇表单设置满足个性化需要，灵便丰盛 个别的在线表单在生成之后，可能丰盛和调整的中央其实很少。但 vika 维格表的神奇表单却领有着丰盛灵便的个性化设置，从外观丑化到权限管控，高频实用。 （1）反对必填项 你能够强制填表人必须答复特定的问题，否则就无奈提交表单，防止错过重要信息。 （2）反对列形容对应表单中的问题下方会有相应的问题备注或形容，标准作答，省下前期调整对立之苦。 维格表中的列形容即「神奇表单」 （3）调整与暗藏 随便调整问题程序与暗藏特定内容，扭转对应维格列即可，表单会主动适应。 （4）表单丑化利用封面、LOGO、页面宽度、彩虹标签、表单形容等做表单的个性化视觉展示。 更换封面及 LOGO 调整神奇表单显示成果 ...

要查看在表单中抉择了哪个单选按钮, 咱们首先将所需的输出组与输出的类型作为选项, 而后能够通过以下形式拜访此抉择的值：val()办法。这将返回以后所选选项的名称。 选择器"输出[名称=选项]：已选中"用于抉择具备指定格局输出类型的所有输出组。 语法如下： $('input[name=option]:checked', 'formName').val()在上面的示例中显示。 例子： <!DOCTYPE html><html><head> <title> How to know which radio button is selected via jQuery? </title></head> <body> <h1 style="color: green"> lsbin </h1> <b> How to know which radio button is selected via jQuery? </b> <p> <form id="myForm"> <label> <input type="radio" name="option" value="free"> Free Membership </label> <label> <input type="radio" name="option" value="premium"> Premium Membership </label> </form> <p> The value of the option selected is: <span class="output"></span> </p> <button id="btn"> Check option button </button> <script src="https://code.jquery.com/jquery-2.2.4.min.js"> </script> <script type="text/javascript"> // Check the radio button value. $('#btn').on('click', function() { output = $('input[name=option]:checked', '#myForm').val(); document.querySelector( '.output').textContent = output; }); </script></body> </html>输入如下： ...

明天的知识点 (2020.07.12) —— 第453天 (我也要出题)[html] 表单能够跨域吗？[css] [css子元素会继承父元素的font-size吗？请解释上面父子元素各字体的大小[代码]](https://github.com/haizlin/fe...[js] 给你一个页面，找出该页面应用最多的前三个标签以及他们的数量[软技能] 开发H5时，你都用哪些真机测试呢？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：进群交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

nzForm 布局被打乱nz-form 布局被打乱的原因表单样式使用行内：[nzLayout]="'inline'"表单中使用多中类型的控件（input、datepicker、select...）会出现日期选择控件没有充满，同时 select 控件会被挤到下一行，看看下面的效果 使用官方的样式类设置统一宽度解决在模板对应的CSS中使用下面的样式设置统一宽度 /* 通过设置下面两个样式的宽度解决 nz-select 打乱 form 布局的问题*//* nz-form-control 外围类 */.ant-form-item-control-wrapper{ width: 152.16px;}/* nz-form-item 样式类*/.ant-form-item{ width: 221.2px;}设置后的效果是：其他解决方法实际不该使用inline模式，而应该使用horizontal模式，一个 nz-form-item 中放置4个 label 和 control因为一个 nz-form-item 是一行

概述这篇文章大致梳理积梦采用的表单方案做的一些尝试和回顾.目前从用的方案是 Meson Form, 名字大致来源于 immer json:https://github.com/jimengio/m...目前 Meson Form 形态逐渐开始稳定了, 方案上基本还是可靠的.过程当中的考虑有一些曲折, 大致做一些梳理. KForm早先我们的方案当中其实沿用了一套书写较为简便的方案, 称为 KForm.看过 Meson Form 例子的话, 跟 KForm 的写法已经比较相似了,主要看 items, 每个元素定义了表单当中的一项, 这个表单有 3 项: let { dataSource, onSubmitData, formRef } = this.props;let items: IFormItem[] = [ { id: "name", label: lang.lblName, rules: [{ required: true }] }, { id: "code", label: lang.lblSerialNumber, rules: [{ required: true }] }, { id: "description", label: lang.lblDescription },];return <KForm ref={formRef} items={items} data={dataSource} layout={layout} onSubmitData={onSubmitData} />;粗看这个例子, 可能觉得已经是比较成熟的表单方案了.不过深入使用的话, KForm 存在两个问题, ...

方便不想看完全篇文章的童鞋，简单总结一下，这是篇软广，主要是推广自己在业务中沉淀的一个开源组件 vue-dynamic-form-component 。基于 element-ui 实现的 vue组件，只需编写类似 async-validator 的规则，自动生成对应的表单，支持常见输入类型的同时，支持嵌套对象、hashmap、多维数组等复杂类型。有需要的童鞋欢迎使用和贡献代码，顺便给个star（我也不知道为什么字体自动加黑了，不关我事） 前言几个月前，我在github开源了一个前端解析手机应用安装包（IPA 或 APK 文件）信息的工具 app-info-parser ，算是第一次正儿八经的做开源这件事，之后就有了半夜三四点回复issue、修bug的体验，说实话，上完班还要处理issue是挺累的，但也是乐在其中。正所谓开源一时爽，一直开源一直爽。 对于程序员而言，最不喜欢的事情，除了和产品经理 吵架 （交流，是交流，不是吵架，要peace）外，估计就是一直做重复的事情了。在程序界，有相当一部分开源工具都是为了把人从重复的事情中解放出来，去做更有趣、更能体现个人价值的事情。比如 AI智能回复老婆消息 (请勿随意尝试，老婆没了我不负责)。 之前开源的工具 app-info-parser 是减少重复工作，提高生产效率，接下来的主角 vue-dynamic-form-component 也是如此。 先贴一个展示大概功能的 gif ，动图有点大，如果加载不出来的话可以到 组件首页 查看。 左边是你需要编写的主要代码，右边是对应生成的表单。 背景（Why）为什么要做这个组件？其实在前言中已经提到：因为不想一直做重复、没有技术含量的事情。 对于本篇文章而言，这件重复、没有技术含量的事情就是：简单的表单代码 我所在的小组主要负责公司的公共服务系统搭建及维护，随之而来的便是一套接一套的CURD系统，目前业界已经存在很多优秀的UI库，比如为 Vue 而生的 element-ui, iView，基于 react 的 ant-design 等，已经在很大程度上提高了PC管理系统的开发效率，减少了很多重复工作。 但是对于表单功能，UI库出于通用性的考虑，实际使用中，对于简单的数据对象，我们仍然需要编写大量的表单代码来实现，因为出现了很多优秀的动态表单组件，比如 vue-form-generator，vue-form-making 那么为什么我还要再造一个类似的轮子？这其实要结合组内的技术栈来说： 由于组内的人员配置问题：前端1人（没错，就是孤独的我）、后端8人+，在技术栈上，选用了后端同事相对容易上手的 Vue ，基于 element-ui 开发管理系统。而目前已有的动态表单组件存在以下不适用的问题： vue-form-generator：设计思想很好，但是组件样式比较old school，同时对多级对象、多维数组等复杂数据支持不是很好，需要自己实现 field 组件，使用成本较高vue-form-making：也是基于element-ui, 样式统一，但是基于组件类型生成表单的方式不够灵活，只能利用已存在的输入组件，因此不支持多级对象等复杂类型其他的组件相对而言存在更多的问题，就不一一列举了。 以上就是为什么我会想要再造一个Vue的动态表单轮子，其实里面就已经包含了接下来我们要讲的： vue-dynamic-form-component 有什么作用？ 功能（What）动态生成表单基于 async-validator 的规则来生成表单，只需要编写简单的声明配置，即可自动生成表单，只需要关注数据类型，无需关注数据类型对应何种输入组件 <template> <dynamic-form v-model="data" :descriptors="descriptors"> </dynamic-form></template>export default { data () { return { data: {}, descriptors: { date: { type: 'date', label: 'date \'s label', required: false }, number: { type: 'number', label: 'number \'s label', required: true, placeholder: 'please input the number' }, string: { type: 'string', label: 'string \'s label', required: true, pattern: /^test$/g }, url: { type: 'url', label: 'url \'s label', required: true, placeholder: 'please input the url' }, email: { type: 'email', label: 'email \'s label', required: false }, enum: { type: 'enum', label: 'enum\'s label', enum: ['value-1', 'value-2'] } } } }} ...

form-create具有动态渲染、数据收集、校验和提交功能的表单生成器，支持双向数据绑定、事件扩展以及自定义组件，可快速生成包含有省市区三级联动、时间选择、日期选择等17种功能组件。已兼容iview2.和iview3.版本Github | 文档 欢迎大家收藏、点赞，多多支持。<br/>form-create 是基于 Vue开发的开源项目，可快速生成 iviewUI 的表单元素。目的是节省开发人员在表单页面上耗费的时间，从而更专注于功能开发。使用 form-creae 可快速、便捷的生成日常开发中所需的各种表单。下面向大家介绍一下 form-create 使用方法和生成原理演示生成器如何优雅的创建动态生成一个 input 输入框。内置了规则生成器，用来生成组件规则的助手方法，通过链式操作即可快速生成对应的组件规则。json使用 json 数据生成。可通过后端返回生成规则，进行渲染。php 表单生成器，这是我的另外一个开源项目。通过php生成表单规则，前端可使用 form-create 可直接根据参数进行表单渲染。这样可以很好的做到前后端分离，同时后端也可以很简便的控制表单中的组件和字段。动态渲染当生成规则发生变化时，页面也会实时更新。1.5版本新增组件缓存功能,会按需对组件进行更新，很大的提升了渲染速度和性能。自定义组件form-create 支持生成任意自定义组件，包括嵌套使用 form-create。举例在表单中生成一个 iview 按钮组件生成 elementUI 组件 参考案例使用自定义组件可提升表单的灵活性,也可以实现功能更复杂的表单。实现原理form-create 组件渲染/更新机制图form-craete 动态渲染表单机制图以上就是如何使用 form-create 生成表单生成、动态渲染、自定义组件的说明和演示，以及form-create 项目的生成原理和内部结构。如果您有任何意见或者建议可以通过留言、issue、xaboy2005@qq.com 邮箱来与我联系。✨✨✨参考VueiviewUIVue渲染函数 & JSX