Vue+Element中v-if 表单验证时出现的问题

问题描述：

使用 Vue + Element 中的 el-form-item 做表单切换时， 用 v-if 处理显示或隐藏 ，同一字段校验文本提示错位，校验规则也失效

如图所示：

错乱样式

原因分析：

v-if在操作dom时，在根节点上进行的删减 导致rules 判断的时候 无法取到 v-if 添加进来的prop值

解决方案：

1：在 el-form-item 中添加一个属性 key key值要唯一

 <el-form-item label="借款金额"
	prop="applyMoney" :key="uuid">
    <el-input v-model="borrowApplyFormVo.applyMoney"
    	maxlength="8"
        placeholder="请输入借款金额"
        @keyup.native="changeMoney" />
</el-form-item>

data() {
	return {
		uuid:uuid.getUUID(),
	}
}

2：对el-form-item使用rules来进行动态绑定`，一旦切换就会绑定上这个rules

<el-form-item label="借款金额"
	prop="applyMoney" 
	:key="uuid" 
	:rules="[{required: true, validator: checkApplyMoney, trigger: 'blur' }]">
  <el-input v-model="borrowApplyFormVo.applyMoney"
          maxlength="8"
          placeholder="请输入借款金额"
           @keyup.native="changeMoney" />
  </el-form-item>