动态表单自动生成

！需要全局绑定element-plus，否则无法使用

首先在vscode的插件中搜索form-generator-plugin并下载

下载完成后,在任意的文件夹右键，可以看到打开表单设计器并点击:

打开后进入界面,中间是布局，左侧是你可以拖入的组件，右侧是数据交互，你可以根据自己想要的样式去拖动左侧的组件进入中间去搭配。

那么如何把表单的数据与我们自己的系统进行交互呢？这里我建议读者先行了解一下element-plus的表单功能，因为这个表单生成器就是基于el-form来实现的，感兴趣的朋友可以自行学习，我们以这个界面为例，点击运行，生成类型选择页面，点击template,即html来讲解一下右侧的组件属性与表单属性分别对应的意思.以下为对应的html代码：

为了方便朋友们理解，先明确一些概念，首先我们生成的这一整个东西，叫做一个表单，其中每一行，比如说ip地址，指的是一个输入框，我们这里定义了1个表单，5个输入框。每一个输入框的组件属性各不相同，但是所有输入框的表单属性是一致的，因为他们属于一个表单

表单属性

表单属性中，表单名elForm是容器的ref，用于进行快速定位表单，属于js的内容。表单模型是值整个表单的数据都绑定在了sshInfo这一个对象中，点击script，可以看到sshInfo已经给你定义好了：其中就包括了组件属性中的各个输入框的字段名，至于校验模型，则封装了对于每一个输入框的校验规则，校验是否符合规范，初学者可以把他设置为空，不予理会。

组件属性

上面也提到了，字段名就是这个输入框所对应的sshInfo中哪一个数据，其他的配置都是样式之类的，自行配置就好了。生成之后，表单的数据会自行改变，也就是所谓的动态渲染，属于是非常节省工作量了。