el-dialog关闭后表单数据缓存没清空【已解决】

情景介绍

系统中有 新增 和 修改 两个功能，共用一个对话框。
要求新增时对话框内容为空，修改时内容默认填充旧数据。
遇到的问题是，点击新增后内容填充了，关闭对话框再点击新增或者其他条目的修改，对话框内还是第一次打开的旧数据，没有清空。

分析问题

既然对话框数据没有清空，就看点击 新增 和 修改 两个按钮的函数是怎么写的。
首先对话框通过设置:visible.sync="open"控制是否弹出，然后通过ref="form"获取表单元素。

然后，新增按钮和修改按钮触发的函数如下：

/** 新增按钮操作 */
    handleAdd (row) {
      this.form.id = null
      this.open = true
      this.title = '新增词条'
      this.resetForm('form')
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      const url = `/api/focus/entry/detail/${row.id}`
      this.$http
        .get(url)
        .then((response) => {
          this.form.id = `${row.id}`
          this.open = true
          this.form = response.data
          this.form.keywordsTags = this.form.keywords.split('#*#')
          this.title = '修改词条'
          this.resetForm('form')
        })
        .catch()
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

不管业务相关的内容，从功能上来说：

1. 新增按钮，打开对话框，执行重置表单的操作。
2. 修改按钮，获取当前行的数据，打开对话框并将数据填充到表单中，执行重置表单操作。

这个重置表单的操作就是关键了：

	resetForm (formName) {
      this.$nextTick(() => {
        var form = this.$refs[formName]
        form.resetFields()
      })
    },
1
2
3
4
5
6

其实就是通过resetFields()函数来初始化表单数据。这个函数的本质并不是清空表单，而是用初始值覆盖表单。 如果初始值是空，那么就能起到清空表单的效果。而这个初始值指的是对话框第一次渲染出来时的表单数据。

所以，如果先点击修改按钮，里面的数据被当成了初始值，之后每次打开对话框执行重置表单的操作都是将初始值填充到表单，也就出现数据缓存没清空的问题了。

解决方案

其实罪魁祸首就是修改按钮函数中，获取当前行的值并填充到表单的操作，现在只要让修改按钮函数的赋值操作，在表单渲染之后的一个执行周期就行了。使用$nextTick()，保证表单第一次渲染是空值。

/** 修改按钮操作 */
    handleUpdate (row) {
      const url = `/api/focus/entry/detail/${row.id}`
      this.$http
        .get(url)
        .then((response) => {
          this.form.id = `${row.id}`
          this.open = true
          this.$nextTick(() => {
            this.form = response.data
            this.form.keywordsTags = this.form.keywords.split('#*#')
            this.title = '修改词条'
          })
          this.resetForm('form')
        })
        .catch()
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

优化

el-dialog 官方文档中提供了 close事件，关闭对话框执行的函数，这里将表单数据置空可以实现新增时手输数据不被缓存。

	clearForm () {
      this.form = Object.assign({}, {
        name: '',
        description: '',
        keywords: '',
        keywordsTags: []
      })
1
2
3
4
5
6
7

总结

我遇到的这个问题，是误解了 resetFields 函数的功能。注意这个函数是将表单重置为初始值，要确定好初始值是啥。

参考博客：https://blog.csdn.net/m0_67400973/article/details/123352141