elementui 文件转ts_vue+elementUI+TS+Form 如何动态创建表单并且添加验证

这几天做动态表单验证，在没获取数据之前，所有字段都不知道，因为服务器个数和每个服务器的配置项或者配置项名称都是不确定的，全部都是动态变换的，无法写死。

做的是配置管理模块，主要是对各个服务器中心进行配置修改，新增配置项是在后端那边实现，前端只负责修改。这代表着前端只能动态生成，不然后端新增或者修改一个配置项或者配置项名称，前端就要跟着改一次，这样太麻烦了，页面大概是这样的：

表单代码如下：

注意：item是属性名，value是属性值。

也许有人感到迷惑，为什么input里的v-model不直接写value，而是用对象的方式获取属性值，那是因为直接写v-model="value"会报错

以上动态表单已经生成了，下面讲讲动态生成表单验证信息。由于配置服务器个数不确定以及配置字段不确定，后端也不好做验证，前端更不好做验证，故而只做简单的非空和长度验证，这是每个表单共用的。

elementUI Form验证，注意，prop这个字段是必要的，你不写表单验证就不会生效。

下面图中的代码是动态生成每个服务器对应的表单验证对象数据的。

cloneCurrentConfigContent对象是currentConfigContent对象的复制，因为在填写表单的时候，会让currentConfigContent对象的值发生变化，这会导致验证效果会和我们要的效果有出入，缓存一个对象它的值是不会变的，可以进行实时正确的验证。

在切换服务器函数中引用这个函数时，注意一下，可能因为复制对象的缘故，如果不加$nextTick函数，会在切换服务器时，每个服务器的配置项中，总有几个配置项验证会出问题，加这个函数后，就可以完美解决这个问题，每项验证都正确

以上就是vue+elementUI+TS+Form动态创建表单和动态创建验证的所有信息，如有不懂，请留言，我看到会回复大家的