投稿

Vue前端开发之表单封装

Vedu • • 程序开发 • 阅读 1801

效果图片

Vue前端开发-表单封装

动态表单和子表单 upholdjx/tao-form

简介： 基于 Vue 和 ElementUI 构建的form表单和子表单动态构建，具有动态渲染，参数校验，数据双向绑定

动态表单

目录结构

Vue前端开发-表单封装

表单组件库

文件说明：

config.js 扫描widget下的所有控件根据组件的name动态注册组件

Vue前端开发-表单封装

config.js 文件扫描组件

extends/setting.js 用于控件继承的函数，处理数据绑定的参数及方法处理

Vue前端开发-表单封装

控件继承函数setting.js

基础控件说明，每个控件下面都有个index.js 文件去导入需要使用的文件，加这一步的主要原因是对待不同的UI框架考虑

Vue前端开发-表单封装

index.js 用于导出指定的组件

Vue前端开发-表单封装

inpu/page.js 输入控件文件

需要注意的是每个控件中的name 是必须要的，使用的时候是根据name 使用的如：

定义name: \'tao-input\'
控件使用就是： <tao-input />

动态表单

使用element-ui 的表单组件

Vue前端开发-表单封装

tao-form/index.vue 表单组件封装

动态子表单

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);
  }
}

使用表单

Vue前端开发-表单封装

tao-form 使用

使用子表单

Vue前端开发-表单封装

tao-subform 组件使用

控件独立使用

<tao-input v-model="formValue" />
  
formValue: \'单独控件-输入框\'

说明： 为了避免代码错位，文中代码都用了图片替代，完整代码不方便放地址，获取看第一张图片的描述，码云上搜索后面的英文就可以看到，这是本人在项目开发中有这个需求然后就写了这个，市面上很多类似这样的，项目中很多需要自定义，所以就重新造轮子了

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/9760.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-08-20 09:26
下一篇 2020-08-20 09:29

相关推荐

发表评论

登录后才能评论