前言本文基于vue和element-ui的需求编写。在前端开发的过程中，我们经常会遇到表单开发的需求。element-ui给我们带来了极大的方便。前端只需要多关注前端逻辑即可。我们经常会遇到比较复杂的表单，比如下面的表单：我们在设计的时候可以设计成3级表单，即将表单分成各个勾选项（输入框、下拉框等），最终效果如下图所示：实现el-form的使用，详见：Form表单有几个重要的属性：ref相当于标签的idmodel表单数据对象规则表单验证规则propformfieldmodelfieldlabellabeltext提交按钮时，执行validate方法即可；对于实时验证，可以在规则中设置验证项触发：'change'1.el-form设计将表单分为各个验证项（输入框，下拉框等），你可以是设计为3级形式奖励设置。这个验证项稍微复杂一点。可以动态绑定模型和规则，实现子项的表单验证2.el-form-item子项校验比较简单，只需要获取每个表单对象并执行validate，遍历二级表单获取二级表并执行同样的操作定义表单数据模型：form:{name:'',seconde_form:[{packet_name:'',},],}，封装一个check_form方法/***表单验证方法*@param{String}form_name*/function$check_form(form_name){constform_component=this.$refs[form_name][0]?this.$refs[表单名称][0]:this.$refs[表单名称];returnnewPromise((resolve,reject)=>{form_component.validate(valid=>{如果（有效）{resolve();}else{拒绝（）；}});});}点击按钮的时间执行checkParam方法asynccheckParam(form_name){try{awaitthis.$check_form(form_name);for(leti=0;i
