elementUI 的resetField是对整个表单进行重置,将甩有字段值重置为初始值并移除校验结果,当内容不一致,或者找不到内容时,就会报错,具体原因举例如下:
原因: 当表单有v-if根据表单内部数据去控制是否显示时,会存在这个问题
<el-form ref="form" :model="form" :rules="addLabelValidator">
<el-form-item v-if="disabled" :label-width="formLabelWidth" label="类别名称" >
<el-input v-model="form.name" :maxlength="30" autocomplete="off" placeholder="请输入类别名称" disabled/>
</el-form-item>
<el-form-item v-else :label-width="formLabelWidth" label="类别名称" prop="name">
<el-input v-model="form.name" :maxlength="30" autocomplete="off" placeholder="请输入类别名称" clearable/>
</el-form-item>
<template v-if="disabled">
<el-form-item :label-width="formLabelWidth" label="创建人">
<el-input v-model="form.createName" autocomplete="off" disabled/>
</el-form-item>
<el-form-item :label-width="formLabelWidth" label="创建时间">
<el-input v-model="form.createDate" autocomplete="off" disabled/>
</el-form-item>
</template>
<el-form-item :label-width="formLabelWidth" label="备注">
<el-input v-model="form.mark" :autosize="{ minRows: 2, maxRows: 4}" :disabled="disabled" type="textarea" autocomplete="off" placeholder="请输入备注" clearable/>
</el-form-item>
</el-form>
网上的部分解决方案:
1.使用v-show代替v-if
2.使用clearValidate移除表单项的校验结果。对有验证的字段进行清空验证error内容,对不需要验证的字段进行手动初始化;
3.使用以上两种方式结合
上面的方法,都没有彻底地解决这个问题:
Vue 实现响应式并不是数据发生变化之后DOM立即变化,而是按一定的策略进行DOM的更新,在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM就不会存在上面的报错问题
this.$nextTick(() => {
this.$refs.form.clearValidate()
})