Vue — 动态表单组件
最后更新于：2022-04-02 08:09:33
>[success] # 动态表单组件
~~~
1.公司有个项目需求是用户可以拖拽，自己定义表单内容然后根据
自己的需求做自己的表单验证和表单的打印
2.整套代码我虽然不是动态表单组件的模块的开发人员，也大概看了
这部分代码，我们公司的思路是通过'element-ui' 提供的组件基础上
我们吧需要的对应字段和'form-item' 放到一起变成一个自定义的组件
，相比下面我通过'思否'学到的这种相比，我们的好处这是在定制化
程度上可能略高，实际体验和代码感觉略差，后续有机会，也会简单
整理一下我们公司这套分享出来
3.下面会主要对'思否' 这套进行说明
~~~
>[info] ## 创建动态组件准备 -- 数据渲染表单字段篇
~~~
1.需要知道'vue' 提供的动态组件'component' 和'is' 相关知识
2.需要 了解'element-ui' 或者'iview-ui' , 接下来的内容是通过'iview-ui'
做的讲解说明
3.要知道表单组件整体分类，在这里我个人给表单组件分成两种，
'普通组件' 和 '组合组件'，'普通组件'指的就是那些不需要配合直接使用
的，例如'input','组合组件' 指的是那些其实是两个部分或者多个部分整合
一起才能构成一个表单项，例如'select' 给和'option'一起才能使用
4.动态组件需要和后台规定好各自所需要的字段，下面的案例规定方式
不是唯一方式，可以根据实际需求来自行规定
5.这里将动态组件分成两个版本，第一个版本就是普通用来渲染，第二个是
加上了验证，拆成两个版本主要是为了方便理解
~~~
>[danger] ##### 在views 文件下创建视图组件 -- FormTest.vue
~~~
1.在vue的视图组件文件下创建一个任意的vue文件
~~~
~~~
1.创建一个动态表单组件'form-group'
2.用formList 模拟后台返回数据
2.1 name -- 用来做验证的key
2.2 type -- 组件类型为了动态组件渲染时候使用
2.3 value -- 显示返回的内容值，例如input 需要绑定的v-model 就是这个value
2.4 label -- 在form-item 用来展示字段文字
2.5 children -- 组合组件
3.这里使用的是iview的ui，因此type 这里对应好相应的iview组件
4.在整个formList 模型中注意他们type对应的组件在去iview 文档中查询自己需要的属性即可
5.简单组件例如input 和 range一类他们只需要单个配合即可渲染，复杂的例如select 需要配合
option等多个组合，因此数据结构也会略微需要调整，可以对这种组合形式组件增加自己以用来识别
定义的字段'children'，或者根据需求自定义自己想要的
6.例如radio 和 checkbox 无论是在iview 还是 在element 他们看似是一个组件构成
但实际他们用起来也可以说是组合组件的存在，他们都有一个 group 组的存在
~~~
~~~
';