Problems encountered in using element

Use of form in element

<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      width="688px"
      :destroy-on-close="true"    关闭销毁
      :close-on-click-modal="false"   点击蒙层不关闭
      :before-close="handleClose"
    >
      <el-form :model="form" ref="form" :rules="editRules">
        <!-- 必须写prop,否则校验不生效  -->
        <el-form-item label="数量" prop="number">
          <!-- 对于校验数字要写v-model.number,否则校验有问题  -->
          <!-- input里如果没有v-model,则不能写入值  -->
          <el-input placeholder="请输入数量" v-model.number="form.number"></el-input>
        </el-form-item>
        <el-form-item>
          <el-tooltip placement="top-start">
            <span slot="content">请填写说明</span>
            <img src="@/assets/images/xx.png" height="14" width="14" />
          </el-tooltip>
        </el-form-item>
        <el-form-item
          label="奖品图片配置"
          class="wechatCover"
          prop="imgUrl"
        >
          <el-upload
            class="avatar-uploader"
            :on-success="uploadSuccess"   成功上传之后的回调
            action="/atpapi/common/upload"  上传图片的地址
            :show-file-list="false"
            :before-upload="beforeUpload"   图片上传后的操作    
          >
            <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    var valiIcon = (rule, value, callback) => {
    
    
      // 图片验证
      if (!this.hasPic) {
    
    
        callback(new Error("请上传图片"));
      } else {
    
    
        callback();
      }
    };
    return {
    
    
      form: {
    
    
        number:'',
        imgUrl:''
      },
      showDialog: false,
      editRules: {
    
    
        number: [
          {
    
    
            required: true,
            message: "数量不能为空"
          },
          {
    
    
            type: "number",
            min: 0,
            message: "数量必须为数字值且最小值为0"
          }
        ],
        imgUrl: {
    
    
          required: true,
          validator: valiIcon,
          trigger: "change"
        }
      }
    };
  },
  methods: {
    
    
    uploadSuccess({
    
     data }) {
    
    
      //上传图片加了强制更新后校验会有问题,只能自定义校验
      this.hasPic = true;
      this.form.imgUrl = data.url;
      this.$refs.form.clearValidate("imgUrl");
      this.$forceUpdate();
    },
    handleClose(done) {
    
    
        //只清除该表单项的校验，不清除该表单项的数值
        this.$refs.form.clearValidate('number');
        //清除校验
        this.$refs["form"].clearValidate()
        //表单重置
        this.$refs["form"].resetFields()
        //必须写done
        done()
     },
   }
}
</script>