vue form表单 第一次页面加载不渲染_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'控件使用就是： 

动态表单

使用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 组件使用

控件独立使用

  formValue: '单独控件-输入框'

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

第一次这样写文章有不合适的可以指出下次会改正，本人后端转前端，目前前端菜鸟一名，希望和各路同行一起成长一起进步，希望大家多多支持！