Element-plus中resetFields重置表单无效的问题

1,918 阅读1分钟

问题

今天在使用element-plus中表单的一个重置方法时,遇到了重置无效的问题,页面结构如下:

<el-form :model="formData" :rules="formRules">
    <el-form-item prop="name">
        <el-input type="text" v-model="formData.name" />
    </el-form-item>
    <el-form-item>
        <el-input type="textarea" v-model="formData.memo" />
    </el-form-item>
</el-form>

当我使用resetFields()方法重置表单时,只有类型为text的输入框内容被重置了,但是textarea输入框没有被重置

发现

起初以为是resetFields()方法对textarea无效,后来发现是该方法只对添加了表单验证的输入框才有效果,因为我只给text输入框添加了表单验证,所以才会出现一个生效一个不生效的问题

解决

我的解决方案是给textarea添加了一个验证,主要是要给<el-form-item>节点添加prop属性即可解决问题

或者一个一个的将表单的值重新赋值也能解决,但是如果表单的值比较多的话就很麻烦

不知道还有没有别的解决方案,欢迎补充