如何动态添加表单及校验

ui ： 饿了么

需求 ： 点击新增可以添加表单

// 页面代码 
<el-form ref="dynamicValidateForm" :model="dynamicValidateForm" label-width="100px" class="demo-dynamic">
 <a-card v-for="(item, index) in form1.dynamicItem" :key="index">
          <a-row>
            <a-col :span="12">
              <el-form>
                <el-form-item
                  label="标题"
                  :prop="`dynamicItem.`+index+`.name`'"             // 这里的自定义prop必须按照文档写， 不然无法校验
                  :rules="{
                    required: true, message: '标题不能为空', trigger: 'blur'
                  }"
                >
                  <el-input v-model="item.name" style="width:300px" />
                </el-form-item>
                <el-form-item
                  label="摘要"
                  :prop="`dynamicItem.`+index+`.phone`'"  
                  :rules="[
                    {required: true, message: '摘要不能为空', trigger: 'blur'},
                  ]"
                >
                  <el-input v-model="item.phone" style="width:300px" />
                </el-form-item>
                <el-form-item label="页面背景图" :prop="`dynamicItem.`+index+`.imagUrl`'"  >
                  <el-upload
                    action="/"
                    class="avatar-uploader"
                    :data="{index}"
                    :http-request="Upload"
                    :show-file-list="false"
                    accept=".jpg,.jpeg,.png,.JPG,.JPEG"
                  >
                    <el-image v-show="item.imageUrl" style="width: 200px;height: 200px" :src="item.imageUrl" />
                    <i v-show="!item.imageUrl" class="el-icon-plus avatar-uploader-icon" />
                  </el-upload>
                </el-form-item>
                <el-form-item>
                  <i class="el-icon-delete" @click="deleteItem(item, index)" />
                </el-form-item>
              </el-form>
            </a-col>
            <a-col :span="12">
              <div class="market">
                <div class="market_left">
                  <p style="font-size: 24px;font-weight: 500">{{ item.name }}</p>
                  <p style="font-size: 16px">{{ item.phone }}</p>
                </div>
                <div class="market_right" />
              </div>

            </a-col>
          </a-row></a-card>
          // 触发事件
           <el-button @click="addDomain">新增标摘封</el-button>
             <el-button
              style="color: #FFFFFF;
                  background-color: #cf001a;
                   border-color: #cf001a;"
              @click="submitForm('dynamicValidateForm')"> 提 交
            </el-button>
 </el-form>   

 // data内容
 data() {
    return {
      form1: {
        name: '',
        phone: '',
        imageUrl: '',
        dynamicItem: [{ imageUrl: '',
          name: '',
          phone: '' }]
      }
      }}

// 方法 
// 提交表单 
 submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.commitInfo() // 提交表单
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

// 删除方法 
deleteItem(item, index) {
  this.form1.dynamicItem.splice(index, 1)
},
// 动态添加表单的方法 
    addDomain() {
      if (this.form1.dynamicItem.length < '3') {
      // 最多只能添加三条
        this.form1.dynamicItem.push({
          name: '',
          phone: '',
          imageUrl: ''
        })
      } else {
        this.$message.warning('最多只能添加三个！')
      }
      console.log(111, this.form1.dynamicItem)
    },
    // 自定义图片上传的方法 
   Upload(file) {
      // console.log(file, item, 88676765786)
      // return
      var that = this
      // setTimeout(function() {
      async function multipartUpload() {
        console.log(file)
        const temporary = file.file.name.lastIndexOf('.')
        console.log(temporary, 22)
        const fileNameLength = file.file.name.length
        const fileFormat = file.file.name.substring(
          temporary + 1,
          fileNameLength
        )
        // // 文件名字
        const fileName = new Date().getTime() + '.' + fileFormat
        // 以下内容需要根据具体情况配置   需要初始化oss内容
        const ossInfo = that.ossInfo
        const OSS = require('ali-oss')
        const store = new OSS({
          stsToken: ossInfo.SecurityToken,
          endpoint: ossInfo.endpoint,
          accessKeyId: ossInfo.AccessKeyId,
          accessKeySecret: ossInfo.AccessKeySecret,
          bucket: ossInfo.bucket
        })
        const options = {
          callback: {
            url: ossInfo.callbackUrl,
            body: ossInfo.callbackBody,
            contentType: ossInfo.callbackBodyType
          }
        }
        const res = await store.put(fileName, file.file, options)
        if (res.data.error_code === 200) {
        //  成功拿到回调
        // 回调的图片地址复制给上方的动态图片地址。
          that.form1.dynamicItem[file.data.index].imageUrl = res.url
          console.log(this, that, 8888)
        } else {
          this.$message.error(res.message)
        }
      }
       multipartUpload()
    },