elementui form 表单数据不置空问题

Posted 2023-05-08

参考技术A 最近在使用elementui 中的form表单遇到的一个诡异的问题，我form表单外面嵌套着一个dialog,当我新建一个form对象是，使用官网提供的 this.$refs.form.resetFields()我有效果的，但是当我给form手动赋值后，再重新点开form，内容并没有清空

输入内容清空正常：

手动赋值，重新再打开form,不能清空内容

后面经过在网上查帖子，可算解决了这个问题。
当我们遇到这样的问题时，可以尝试按以下方式进行排查错误：

vue + elementui表单重置 resetFields问题（无法重置表单）

问题：

    elementui在重置表单时，无法使用this.$refs[‘formRefVal‘].resetFields()清空表单数据;
    elementui 设置rules后没有效果

解决方法：

    1、表单加ref属性

<el-form ref="refname"></el-form>

    2、form的每个item加prop属性（踩了好久的坑这个,需要和绑定数据的最后名称一致，prop属性添加到form-item上）

<el-form-item prop="name">
    <el-input v-model="query.name"></el-input>
</el-form-item>

    3、绑定点击事件中传入refname

<el-form-item>
    <el-button @click="resetForm(‘refname‘)">清空</el-button>
</el-form-item>

    4、注册事件

restForm(refname) {
   this.$refs[refname].resetFields()
}

+ 5、检查是否有初始值
在data数据上需要挂载表单数据初始值为‘‘

    如果使用了$store.state.fm.plan管理关联表单数据，那么在form中需要添加:model="$store.state.fm"。