解决 element-ui 中From 表单和Dialog 对话框搭配使用时 resetFields重置方法无法清空数据的问题

原创已于 2025-10-10 21:11:50 修改 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

于 2022-12-29 11:43:54 首次发布

本文介绍在实现表格的增删改查功能时，如何正确地重置表单以避免上一次操作的数据残留问题。通过具体示例说明了如何在Vue中使用resetFields方法，并给出了设置初始值来彻底清空表单的有效解决方案。

在实际开发实现表格的增删改查的时候，新增和修改通常共用一个弹窗以节省代码量

当我们先点击修改的时候，会对弹窗表单进行赋值，这个时候我们再点击新增，会发现刚刚的表单数据仍然躺在表单中，并且使用resetFields没有清除数据

addTask(formName) {
      this.addVisible = true
      this.$nextTick(() => {
        this.$refs[formName].resetFields()
      })
    },
//使用this.$nextTick也没有效果

其实resetFields()是生效了的，resetFields方法是将值重置为初始值而不是清空，初始值就是刚刚表单里的数据。

如果我们要清空数据，就要在this.$nextTick里重新赋值为初始值

addTask(formName) {
  this.addVisible = true
  this.$nextTick(() => {
    this.addForm = {  //这里放你自己的初始值对象
      pathName: '',
      pointCount: '',
      safeDistance: '',
      inspectionDay: '',
      bridgeIds: '',
      userNames: '',
      beginDate: '',
      endDate: '',
      length: 0,
    }
    this.$refs[formName].resetFields();
  })
},