Vue前端开发之表单封装
效果图片
动态表单和子表单 upholdjx/tao-form
简介： 基于 Vue 和 ElementUI 构建的form表单和子表单动态构建，具有动态渲染，参数校验，数据双向绑定
动态表单
目录结构
表单组件库
文件说明：
config.js 扫描widget下的所有控件根据组件的name动态注册组件
config.js 文件扫描组件
extends/setting.js 用于控件继承的函数，处理数据绑定的参数及方法处理
控件继承函数setting.js
基础控件说明，每个控件下面都有个index.js 文件去导入需要使用的文件，加这一步的主要原因是对待不同的UI框架考虑
index.js 用于导出指定的组件
inpu/page.js 输入控件文件
需要注意的是每个控件中的name 是必须要的，使用的时候是根据name 使用的如：
定义name: \'tao-input\'
控件使用就是： <tao-input />动态表单
使用element-ui 的表单组件
tao-form/index. vue 表单组件封装
动态子表单
子表单
使用
注册组件
import taoForm from \'./tao-form\'
import taoSubForm from \'./tao-form/subform.vue\'
import \'./tao-form/config.js\' // 为了控件可以独立使用
export default {
install(Vue) {
Vue.component(\'tao-form\', taoForm);
Vue.component(\'tao-subform\', taoSubForm);
}
}使用表单
tao-form 使用
使用子表单
tao-subform 组件使用
控件独立使用
<tao-input v-model="formValue" />
formValue: \'单独控件-输入框\'说明： 为了避免代码错位，文中代码都用了图片替代，完整代码不方便放地址，获取看第一张图片的描述，码云上搜索后面的英文就可以看到，这是本人在项目开发中有这个需求然后就写了这个，市面上很多类似这样的，项目中很多需要自定义，所以就重新造轮子了
内容出处：，
声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/9760.html
微信扫一扫
支付宝扫一扫
相关推荐
-
js判断只能输入数字、字母代码总结
有时我们希望用户只能输入数字、字母，其它的全部不允许进入，下面我来给大家介绍几段关于只能输入数字、字母代码实现，有需要了解的朋友可参考。 在js中正则表达式我们可以这样验证 数字：…
程序开发 Vedu
-
ubuntu下常用alias
将该内容替换掉 ~/.bashrc 文件 即可 # ~/.bashrc: executed by bash(1) for non-login shells. # see /usr/…
程序开发 Vedu
-
SQL Server数据库常用近百条SQL语句分享
1. sqlserver查看实例级别的信息，使用SERVERPROPERTY函数 select SERVERPROPERTY (\’propertyname\’) 2. 查看实例级…
程序开发 Vedu
-
SpringBoot+webSocket实现扫码登录功能
最近单位又有一个新Java项目。 涉及到扫码登录。之前项目使用的是 ajax轮询的方式。感觉太low了。 所以这次用webSocket的方式进行实现 好。废话不多说！咱们开始！！ …
程序开发 Vedu
-
程序开发
前端设计大佬自己写了vue支付密码效果
从网上搜索了好多都很麻烦，花了点事件自己做了个，简单轻便，老少皆宜 。 <template> <section class=”pay-mask” @…
Vedu
-
程序开发
PHP用round函数计算百分比
最近做的一个项目，需要计算金钱余额为百分比，也就是只要两位小数点的余额，这个时候自然就想到了四舍五入函数round();完美解决问题，这里再来温习一下这个函数吧，对于处理小数点上是…
Vedu
-
优化推广
百度竞价推广时不可忽视的28定律
什么是竞价推广二八定律以方便大家参考。二八定律(The80/20Rule)，又称为80/20法则、帕累托法则、不平衡原则、犹太法则。 此法则是意大利经济学家帕累托在19世纪末提出来…
Vedu
-
程序开发
ASP.NET MVC最好的视图引擎Razor语法使用速成指南
在ASP.NET Core MVC应用程序中，视图引擎（view engine）负责处理发送给客户端的内容。MVC框架中默认的视图引擎称为Razor，用来为HTML文件添加注释说明…
Vedu
-
如何在Electron中使用Node原生模块
Electron 支持原生的 Node 模块，但由于和官方的 Node 相比，Electron 有可能使用一个和我们系统上所安装的 Node 不同的 V8 引擎，所以使用的模块需要…
程序开发 Vedu
-
程序开发
.NET Core–使用阿里云短信推送
一、引用阿里云短信官方的包 二、调用下面的方法 public bool AliMessageCode(string phone, string val) { var msg = “…
Vedu