Element 版本：v2.15.3

问题背景

如下代码所示：有一个上传文件的 input 组件，在更新的时候，如果不上传文件表示不更新，如果要更新则点击 「重新上传」按钮将上传组件显示出来

  1. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  2.   <!-- 这个字段不是必须的没有写 prop -->
  3.   <el-form-item v-if="!updateDocument" label="文档">
  4.     <el-button @click="updateDocument = true">重新上传</el-button>
  5.     <base-tips margin-left="15px">如需变更请重新上传文档</base-tips>
  6.   </el-form-item>
  7.   <!-- 要更新的话：这个字段要求必须，写 prop  -->
  8.   <el-form-item v-if="updateDocument" label="文档" prop="document">
  9.     <input
  10.            :accept="supportFilesType"
  11.            ref="documentFile" type="file" @change="documentFileChange"/>
  12.   </el-form-item>
  13. </el-form>

image.png
也就是如上图：不更新的话，该字段不是必须的，提交的时候就不会被校验，如果更新的话，就要让这个字段为必填项。

上述代码：从页面上看是正常的，有前面那个红色的 * 号，但是在提交的时候，并没有触发验证。

解决方案

首先：查看表单组件的信息，最终在 Field 这个属性下发现了问题

  1. console.log(this.$refs.form)
  1. 进入页面的时候，Field 中显示的字段数量不包含 document，因为进入页面默认是不更新
  2. 切换到更新状态，Field 中的字段数量并没有变更，那么问题就出现在这里了

这种情况的最主要原因是：表单组件没有触发重新渲染，解决方案靠谱的有：

  1. 在 el-form-item 上增加 key 属性，也就是 vue 中的 key
  2. 在 el-form-item 上手动写上指定的，rules

具体的原理等，请参考该博客，笔者这里觉得第二种方案似乎会更好一点，使用第二种方案来实现

  1. <!-- 写上 prop，并且手动指定 rules，由于需要不校验该字段，设置一个规则 required:false  -->
  2. <el-form-item v-if="!updateDocument" label="文档" prop="document" :rules="[{required:false}]">
  3.   <el-button @click="updateDocument = true">重新上传</el-button>
  4.   <base-tips margin-left="15px">如需变更合同请重新上传文档</base-tips>
  5. </el-form-item>
  7. <!-- 写上 prop，由于需要验证该字段，直接指向原来的 rules 中的规则-->
  8. <el-form-item v-if="updateDocument" label="文档" prop="document" :rules="rules.document">
  9.   <input
  10.          :accept="supportFilesType"
  11.          ref="documentFile" type="file" @change="documentFileChange"/>
  12. </el-form-item>

这样一来，以最小的代价达到了该目的