问题描述

定制软件开发在使用的时候，定制软件开发关闭弹窗之后，定制软件开发发现数据还是保存在上面，定制软件开发查资料试了那些方法，都不太行，最后发现以下方法，泪目。

解决方案：

方案一、使用this.resetForm("form")重置表单

在控制弹窗的点击事件handleUpdate中使用resetForm方法：

// HTML代码 <el-button size="mini" type="text" @click="handleUpdate(scope.row)">发放 </el-button>// js代码    methods() {          handleUpdate(row) {      .../        //清空弹窗内容        this.resetForm("form");      }    }
1
2
3
4
5
6
7
8
9
10
11
12
13

方案二、使用Object.assign方法将弹窗数据全部清空/覆盖，再使用clearValidate()清空校验

在控制弹窗的点击事件handleUpdate中使用Object.assign方法：

// HTML代码 <el-button size="mini" type="text" @click="handleUpdate(scope.row)">发放 </el-button>// js代码    methods() {          handleUpdate(row) {      .../        //清空弹窗内容        this.form = Object.assign({}, {          num: null,          behavior: '',          remark: '',          type: 2,        })      },          }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

因为我的弹窗还包含表单校验，所以在表单的取消按钮中，我还得添加清空校验的代码：

// HTML代码	<el-dialog :visible.sync="openputOut" width="500px" 		<el-form ref="form" :model="form" :rules="numberRules">			<el-button @click="cancelForm">取 消</el-button>		</el-form>	</el-dialog>	// js代码    cancelForm() {      this.openputOut = false      //清空校验      this.$refs["form"].clearValidate();    },
1
2
3
4
5
6
7
8
9
10
11
12
13

这里没有在弹窗点击事件里面使用this.$refs["form"].clearValidate();，而是在取消按钮操作里面。因为如果在那里清空校验的话，要使用nextTick，等dialog已经初始化之后再清空。这样做会出现个现象，会出现闪烁。而不使用nextTick，就不会闪烁，但是在初次点击时，控制台会报错：

    // 2、发放    handleUpdate(row) {      this.openputOut = true;      //清空弹窗内容      this.$nextTick(() => {        this.$refs["form"].clearValidate();      })      this.form = Object.assign({}, row)      if (this.form.putOut == null) {        this.$set(this.form, 'putOut');      }    },
1
2
3
4
5
6
7
8
9
10
11
12

最后完成啦~，每次打开都是清空的弹窗：

下面是我尝试过但没生效的方法：

1、使用官方文档提供的 destroy-on-close属性：

<el-dialog :visible.sync="openputOut" width="500px" destroy-on-close>
1

没有生效，看了组件库的源码，它是通过绑定key值，然后当key属性变化的时候，vue才会对当前组件重新渲染。
2、使用 v-if ：
取值为控制弹窗显示隐藏的值,我们打开弹窗时它就会重新重建,关闭弹窗的话就会销毁。

<el-dialog :visible.sync="openputOut" width="500px" v-if="openputOut">
1

注意:以上方法只是我试了没用，可能是我项目哪个地方不适用或者有冲突，不代表这些方法没用哈，小伙伴可以去尝试下，以下是我参考方案的地址https://zhuanlan.zhihu.com/p/562462448，希望对你们来说是有用的。