element el-form 问题及解决方法（多个inpu框校验，清除校验等）

这篇文件主要介绍一下在使用 element-plus 时遇到的问题及解决方案。

表单项包含多个 input 框

条件：触发验证时两个 input 框都亮了，但实际上一个必填，一个选填。

以前状况：两个 input 框都高亮。

<el-form-item label="联系方式：" prop="phone">
  <div class="df">
    <div class="item-title">手机号</div>
    <el-input
      type="phone"
      placeholder="请输入"
      v-model="formData.phone"
      maxlength="11"
    ></el-input>
  </div>
  <div class="df mt8">
    <div class="item-title wx-label">微信号（选填）</div>
    <el-input
      type="text"
      placeholder="请输入"
      v-model="formData.wechat"
      maxlength="16"
    ></el-input>
  </div>
</el-form-item>

解决后：只有需要高亮的高亮

当一个 el-form-item 中有两个 input 时，且你只需要让某个 input 框触发校验时。你可以使用表单嵌套去解决。

就是在 el-form-item 再放一个 el-form-item，把 prop 写在需要验证的 input 中。

解决代码

<el-form-item label="联系方式：" class="bf">
  <el-form-item prop="phone">
    <div class="df">
      <div class="item-title">手机号</div>
      <el-input
        type="phone"
        placeholder="请输入"
        v-model="formData.phone"
        maxlength="11"
      ></el-input>
    </div>
  </el-form-item>
  <div class="df mt8">
    <div class="item-title wx-label">微信号（选填）</div>
    <el-input
      type="text"
      placeholder="请输入"
      v-model="formData.wechat"
      maxlength="16"
    ></el-input>
  </div>
</el-form-item>

当这样修改后会发现联系方式前面的星号没了，没关系，可以通过手动加样式完美解决

<style scoped lang="scss">
.bf {
  :deep(.el-form-item__label::before) {
    content: "*";
    color: var(--el-color-danger);
    margin-right: 4px;
  }
}
</style>

清除校验

表单清除校验，可以再表单加载或取消时使用，防止表单重新加载验证还在

formRef.value.clearValidate();   // 清除校验但不清除数据

formRef.value.resetFields();      // 清除校验同时清除数据