效果图片
简介: 基于 Vue 和 ElementUI 构建的form表单和子表单动态构建,具有动态渲染,参数校验,数据双向绑定
动态表单
目录结构
文件说明:
config.js 扫描widget下的所有控件根据组件的name动态注册组件
extends/setting.js 用于控件继承的函数,处理数据绑定的参数及方法处理
基础控件说明,每个控件下面都有个index.js 文件去导入需要使用的文件,加这一步的主要原因是对待不同的UI框架考虑
需要注意的是每个控件中的name 是必须要的,使用的时候是根据name 使用的如:
定义name: \'tao-input\'
控件使用就是: <tao-input />
动态表单
使用element-ui 的表单组件
动态子表单
使用
注册组件
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-input v-model="formValue" />
formValue: \'单独控件-输入框\'
说明: 为了避免代码错位,文中代码都用了图片替代,完整代码不方便放地址,获取看第一张图片的描述,码云上搜索后面的英文就可以看到,这是本人在项目开发中有这个需求然后就写了这个,市面上很多类似这样的,项目中很多需要自定义,所以就重新造轮子了
内容出处:,
声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/procedure/9760.html