在element ui 初学者手里v-for循环生成表单的坑

使用element ui 进行开发表单的时候遇到了这样一个问题，目标要求是要实现点击一个添加按钮，实现生成一个新的表单，同时对表单中填写的字段进行一个验证并显示提示信息。

然后在做的过程中，按照element ui的代码添加了基本的方法之后报错为

this.$refs[formName].validate is not a function

这里需要循环生成的表单的prop是一个变量，但是最开始并没有实现他的‘变’，同时，验证规则也必须和每一个表单一一对应，每生成一个表单，就得要对应一套验证规则，所以需要给每个表单添加验证规则。而不是只有一套。

更好的解决办法是，给表单里面（循环的元素外面）添加一层div，循环生成这部分div就可以了。需要注意的是，rules验证需要添加在每一条循环的item上。

主要代码示例：
<div v-for="(domain, index) in ruleForm.domains" :key="domain.key" class="contain">
        <el-form-item
          label="型号"
          :prop="'domains.' + index + '.mac'"
          :rules="{required: true, message: '型号不能为空', trigger: 'blur'}"
        >
          <el-select v-model="domain.mac" placeholder="请选择型号">
            <el-option label="V200" value="0"></el-option>
            <el-option label="A300" value="1"></el-option>
          </el-select>
        </el-form-item>
</div>
......
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>

submitForm(formName) {
      console.log(this.$refs[formName]);//在操作前看看自己获取的formName，确认无误在继续后续操作
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
},