0003-Vue中重新渲染后验证规则受影响的解决办法

一、场景：

如上图，当我点击贴现方式时，组件会重新渲染，变成如下：

 

这时，票面金额的验证错误提示信息会自动消失掉。

（前提，我并没有使用Form.clearValidate()方法清除验证消息）

二、解决方法其实挺简单，就是在<form-item></form-item>外面包一层<el-row>

      <el-row>
        <el-form-item label="票面金额：" prop="Amount">
          <el-input v-model.number="form.Amount" type="number" placeholder="请输入票面金额" auto-complete="true"
                    style="width:215px;"></el-input>
          元
        </el-form-item>
      </el-row>

这样，当更改贴现方式重新渲染组件时，票面金额的验证消息就不会受影响了。

三、另外

使用Form.clearValidate()方法，在组件重新渲染时，可以消除指定的验证消息，以避免各种错误验证消息充斥页面。

clearValidate

移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果

Function(props: array