(踩坑篇)vue element-ui resetForm()表单重置失效的问题

2022-08-29 14:51:17 浏览数 (2)

好久没更新了,最近在折腾Vue,没用啥时间更新博客。

但是,今天帮朋友看问题时踩到一个坑。

项目时若依的后台管理,有一个数据搜索框,如下(因为部分原因不能展示整个页面)。

点击搜索后正常显示搜索的数据,本来应该点击重置后回到原来展示所有数据的样子。

但是点击重置后并没有用。

我原来以为重置是自己写了额外的方法,但是我查看methods里面的方法发现,这个按钮是调用的查询方法,只不过查询之前,他使用resetForm()方法去清空表单中的所有数据。

那么问题就很好定位了,使用resetForm()方法来清空表单数据时,不能清空。

一般来说,出现这种问题,我首先查看属性是否齐全。

代码语言:javascript复制
 <el-form ref="postForm" :model="postForm" :rules="rules" >

el-form中必须包含以上3个属性,但是我查看了都有。

那就可能是:model的对象不正确,因为resetForm()是根据数据对象来清空的。

查看对象发现确实:model绑定的对象不对,修改后发现input框已经可以重置了。

但是,好像下拉框并没有重置。

可能是v-model绑定的那个属性不在对象中,因为我们刚刚看到data中数据没有他。

那么可能这个属性就没被定义再resetForm()中,也就是他不会对这个属性清空值。

那就只能手动了。

那就手动加一句:

代码语言:javascript复制
    resetQuery() {
      //手动清空
      this.queryParams.appCemeteryId = '';
      this.resetForm("queryForm");
      this.handleQuery();
    }

这样就好了,测试了功能也正常。

0 人点赞