vue渲染多个表单

html: 

 <div v-for="(item, index) in userDefinedFormList" :key="index">
    <el-form
      :model="item"
      ref="userDefinedForm"
      :rules="userDefinedFormRules"
      label-width="100"
      class="userDefined-form"
    >
      <div class="userDefined-item-box">
        <el-form-item :label="'名称：'" :prop="'name'">
          <el-input
            v-model="item.name"
            placeholder="请输入名称"
            class="userDefined-item"
          />
        </el-form-item>
      </div>
      <div class="userDefined-btn-box">
        <el-button
          icon="el-icon-check"
          type="primary"
          size="medium"
          circle
          title="确认修改"
          @click="saveOneParams(index, item, 'userDefinedForm')"
        ></el-button>
      </div>
    </el-form>
  </div>

需要注意的是，添加校验的prop是要加单引号的，否则提示item没有'name'这个项，使用 prop="item.name"? 那肯定不行滴，会出现填写的name值为空的情况

定义：

 userDefinedForm主要用来做初始化：this.userDefinedFormList.push(this.userDefinedForm)
 注意：push()是es6中数组的方法，设置this.userDefinedFormList = null 时是不能用push()的 

userDefinedFormList: [],
      userDefinedForm: {
        name: '',
        type: '',
        maxLength: ''
      },
      // 自定义表单规则校验
      userDefinedFormRules: {
        name: {
          required: true,
          message: '字段名不能为空',
          trigger: 'blur'
        }
      }

js:

// index：表单元素下标，item：数组当前元素，即表单数据
saveOneParams (index, item, formName) { 
// 此时form表单是数组，需要添加下标获取当前表单元素
      this.$refs[formName][index].validate((valid) => {
        if (valid) {
            // http请求
        }
      })
    },

记得初始化要更新数组值，设置为null或者 [ ]