搭配el-upload的动态新增删除表单+对重复项进行校验

目标效果

1.动态新增删除表单
2.校验规则（重点是upload的上传后清除校验提示）
3.对重复项进行校验，只能想到这种比较复杂的方法，有更好的建议请指教T T 

代码参考

html部分

//html
        <el-form
          ref="editForm"
          :model="editForm"
          :rules="editRules"
          inline
          label-width="140px"
        >
          <h3 class="addTitle">访客信息</h3>
          <div
            class="mainInfo"
            v-for="(item, index) in editForm.powerAttrList"
            :key="index"
          >
            <div class="orderInfo">
                  <el-form-item
                    :prop="`powerAttrList[${index}].userName`"
                    :rules="{
                      required: true,
                      message: '访客名称不能为空',
                      trigger: 'blur'
                    }"
                    :label="editForm.powerAttrList[index].name"
                  >
                    <el-input
                      v-model="item.userName"
                      placeholder="请输入访客名称"
                      name="userName"
                      type="text"
                    ></el-input> </el-form-item
                ><el-form-item
                    :prop="'powerAttrList.' + index + '.userPhone'"
                    label="访客电话："
                    :rules="phoneRules"
                  >
                    <el-input
                      v-model="item.userPhone"
                      placeholder="请输入访客电话"
                      name="userPhone"
                      type="text"
                    ></el-input> </el-form-item
                >
                  <el-form-item
                    :ref="`powerAttrList[${index}]`"
                    :prop="`powerAttrList[${index}].imgUrl`"
                    label="认证照片："
                    :rules="{
                      required: true,
                      message: '认证照片不能为空',
                      trigger: 'change'
                    }"
                  >
                    <el-upload
                      class="upload-demo"
                      :action="file.url"
                      accept="image/jpg, image/png, image/jpeg"
                      :limit="1"
                      :on-success="handleAvatarSuccess"
                      :before-upload="checkFileSure"
                      :headers="mytoken"
                      v-model="item.imgUrl"
                    >
                      <el-button
                        size="small"
                        type="primary"
                        @click="getItem(index)"
                        :disabled="btnDisable"
                        >点击上传</el-button
                      ><span
                        slot="tip"
                        class="el-upload__tip"
                        style="margin-left:5px"
                      >
                        只能上传jpg/png文件，且不超过300k</span
                      >
                    </el-upload>
                  </el-form-item>
            </div>
              <el-button
                type="danger"
                class="deleteBtn"
                v-if="editForm.powerAttrList.length > 1 && index !== 0"
                size="small"
                plain
                @click="removeRow(index)"
                >删除</el-button
              >
          </div>
            <el-form-item>
              <el-button
                size="small"
                @click="addVisitor"
                type="primary"
                plain
                v-if="editForm.powerAttrList.length <= 3"
                >新增随行访客</el-button
              >
            </el-form-item>
        </el-form>
 

script部分

data() {
    const validatePhone = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("手机号码不能为空"));
      } else {
        if (!value.match(/^[0-9]{11}$/gi)) {
          callback(new Error("手机号码不正确"));
        } else {
          callback();
        }
      }
    };
    return {
     btnDisable: false,
    //手机号统一使用的自定义校验
      phoneRules: {
        required: true,
        validator: validatePhone,
        trigger: "blur"
      },
      editForm: {
        powerAttrList: [
          {
            userName: "",
            carCard: "",
            userPhone: "",
            belongingIds: [],
            name: "主访客：", //用以写lable,第一个为主访客,后面的都叫随行访客
            imgUrl: ""
          }
        ]
      },
      file: {
        url:
          process.env.VUE_APP_BASE_API +
          "/v-api" +
          "/background/uploadInerUserPic"
      },
      index: "",
      editRules: {
        endTime: [
          { required: true, trigger: "change", message: "预约时间不能为空" }
        ],
        beginTime: [
          { required: true, trigger: "change", message: "预约时间不能为空" }
        ],

        interviewType: [
          { required: true, trigger: "change", message: "来访类型不能为空" }
        ],
        siteId: [
          { required: true, trigger: "blur", message: "请选择来访厂区" }
        ],
        zoneId: [
          { required: true, trigger: "change", message: "请选择可通行楼栋" }
        ],
        employees: [
          { required: true, trigger: "change", message: "请选择被访人" }
        ],
        userName: [
          { required: true, trigger: "blur", message: "请填写访客姓名" }
        ]
      }
    };
  },
  computed: {
    mytoken() {
      return {
        Authorization: `Bearer ${getToken()}`  //upload的请求头
      };
    }
  },

 methods: {
     //点击上传时获取当前未知的index并赋值给表单
   getItem(data) {
      this.index = data;
    },
     // 照片
    handleAvatarSuccess(res, file) {
      this.editForm.powerAttrList[this.index].imgUrl = res.data;
      //清除校验
      //(这里有个bug,由于不是直接赋值在表单里,移除文件后无法清空表单内容)
      this.$refs.editForm.clearValidate(
        "powerAttrList[" + this.index + "].imgUrl"
      );
      this.$message.success("上传成功!");
       this.btnDisable = false;
    },

    checkFileSure(file) {
      const isLt300k = file.size / 1024 / 1024 < 0.3;
      if (!isLt300k) {
        this.$message.warning("上传图片大小不能超过 300kB!");
        return isLt300k;
      }
    },
     //上传照片时禁止上传其他上传事件
    progressDisable() {
      this.btnDisable = true;
    },
    //点击上传时检查是否有重复项
     addOrderInfo() {
      this.$refs.editForm.validate(valid => {
     if (valid) {
          let obj = {
            beginTime: this.editForm.beginTime,
            endTime: this.editForm.endTime,
            intervieweeId: this.editForm.employees,
            orderType: this.editForm.interviewType,
            siteId: this.editForm.siteId,
            zoneId: this.editForm.zoneId,
            visitors: this.editForm.powerAttrList
          };
          //确认可添加
          let auth = true;
          if (this.editForm.powerAttrList.length > 1) {
            //获取重复项
            let newarr = this.editForm.powerAttrList.filter((item, index) => {
              for (let j = 0; j < this.editForm.powerAttrList.length; j++) {
                if (
                  item.userPhone == this.editForm.powerAttrList[j].userPhone &&
                  index != j
                ) {
                  return item;
                }
              }
            });

            if (newarr.length > 0) {
              this.$message.error("不同访客的手机号不能相同！");
              auth = false;
            }
          }
          if (auth) {
            API.addOrder(obj)
              .then(response => {
                this.$message.success("新增成功！");
                this.$refs.mdgDialog.importDialogShown = false;
                this.getList();
              })
              .catch(error => {
                console.log(error);
              });
          }
        }
      });
    },
     // 增加随行访客
    addVisitor() {
      this.editForm.powerAttrList.push({
        beginTime: "",
        endTime: "",
        userName: "",
        carCard: "",
        belongingIds: [],
        name: "随行访客",
        imgUrl: "",
        userPhone: ""
      });
    },
    // 删除属性列
    removeRow(index) {
      this.editForm.powerAttrList.splice(index, 1);
    },

 }