vue2 重置表单失效

使用 this.$refs[‘form’].resetFields() 进行表单初始化时。有个致命的问题：this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据。

问题场景：vue中A页面跳转B页面，带有路由参数。B页面使用参数进行查询。当使用：this.$refs[‘form’].resetFields() 进行重置表单时，就会失效，始终重置不了。

watch: {
  // 根据名称筛选部门树
  orgName(val) {
    this.$refs.tree.filter(val);
  }
},
created() {
  if (this.$route.query.day != undefined) {
    this.dateRange[0] = this.$route.query.day
    this.dateRange[1] = this.$route.query.day
  }
  if (this.$route.query.orgId != undefined) {
    this.queryParams.orgId = this.$route.query.orgId
  }
  this.getList()
},
methods: {
    ......
    getList(){
        ....
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams.orgId = ''
      // this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，
      // 不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据。
      // 页面跳转后传递的参数直接参与页面查询，所以表单初始值就是传递过来的参数。
      // 在使用 this.$refs[‘form’].resetFields() 重置时，就会把最初的参
      // 数重置回来。
      // this.$refs[‘queryParams’].resetFields()
      this.handleQuery();
    },
}

 解决办法

不使用 this.$refs[‘queryParams’].resetFields() 重置；手动赋值的形式，清空表单对象