element表单组件使用v-if控制item显隐时，表单校验不生效的问题

原代码

<el-form :model="form" :rules="rules" ref="form">

<el-form-item prop="aaa" v-if="myStatus">

<el-date-picker v-model="form.aaa" value-format="yyyy-MM-dd HH:00:00" type="datetimerange"

range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"/>

</el-form-item>

</el-form>

js:

rules: {

  aaa: [{ required: true, message: "请输入名称", trigger: "blur", }, ],

}

 此处修改了v-if的条件之后，由显示变隐藏再使其显示，就出现了错误。输入了值以后还是一直提示未输入，尝试修改代码将v-if改成v-show之后突然发现可以了。并且如果需要使用自带必填校验的样式的话，需将rules写成带判断是否需要校验；如果不需要原生的必填样式可以使用自定义的校验规则。

修改后代码：

<el-form :model="form" :rules="rules" ref="form">

<el-form-item prop="aaa" v-show="myStatus"

:rules="{required: myStatus?true:false,message: '请输入xxx',trigger: 'blur',}">

<el-date-picker v-model="form.aaa" value-format="yyyy-MM-dd HH:00:00" type="datetimerange"

range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"/>

</el-form-item>

</el-form>

后查阅信息发现了问题原因：v-if/v-show中使用el-form表单校验，解决校验不生效的问题_element v-if显示form绑定问题-优快云博客