vue+elementui(对话框中form表单的reset问题)

当使用Vue框架结合ElementUI组件库开发对话框（Dialog）时，遇到的一个常见问题是如何对对话框中的表单进行重置（Reset）。本文详细讲解了这个问题的解决方法。

问题描述

在Vue和ElementUI中，需要经常使用对话框来收集用户输入的信息。在这个场景中，通常是将表单放在对话框中，以便用户输入信息。当用户提交表单或者关闭对话框时，开发者需要将表单中的值清空，从而保护用户隐私，防止信息泄露。

然而，当使用ElementUI的对话框组件（Dialog）时，表单数据不会自动被重置。因此，需要手动对表单进行重置，以清除上一次的输入数据，让下一次的输入从一个干净的表单开始。

解决方案

为了解决上述问题，需要按照以下步骤操作：

1. 创建表单

首先，需要在对话框中创建表单。例如，以下是一个包含两个输入框（input）和一个提交按钮（submit）的简单表单：

<template>
  <el-dialog :visible.sync="dialogVisible">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        phone: '',
      },
    }
  },
  methods: {
    submitForm() {
      // 提交表单的代码
    },
  },
}
</script>

2. 清空表单

然后，在提交表单的事件处理函数中，需要重置表单。可以使用Vue中提供的$refs属性来访问表单的实例，并调用其方法进行重置，例如以下示例代码：

<template>
  <el-dialog :visible.sync="dialogVisible">
    <el-form ref="form" :model="form" label-width="80px">
      <!-- 表单内容省略 -->
    </el-form>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        phone: '',
      },
    }
  },
  methods: {
    submitForm() {
      // 提交表单的代码

      // 重置表单
      this.$refs.form.resetFields()
    },
  },
}
</script>

使用上述代码即可实现对话框中表单的重置功能。

需要注意的是，重置表单的方法为resetFields()，并且需要通过$refs属性来获取表单实例。如果需要重置对话框中的多个表单，可以将这些表单的引用都保存在data中，然后在事件处理函数中遍历这些表单并调用reset方法。示例代码如下：

<template>
  <el-dialog :visible.sync="dialogVisible">
    <el-form ref="form1" :model="form1" label-width="80px">
      <!-- 表单1的内容省略 -->
    </el-form>
    <el-form ref="form2" :model="form2" label-width="80px">
      <!-- 表单2的内容省略 -->
    </el-form>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form1: {
        // 表单1的数据省略
      },
      form2: {
        // 表单2的数据省略
      },
    }
  },
  methods: {
    submitForm() {
      // 提交表单的代码

      // 重置表单
      this.$refs.form1.resetFields()
      this.$refs.form2.resetFields()
    },
  },
}
</script>

示例说明

以下是两个不同场景下的示例：

示例1：直接重置单个表单

例如，有一个Vue组件中展示了一个对话框，这个对话框有一个表单用于收集用户的姓名和手机号码。当用户提交表单或者关闭对话框时，需要清空表单中的数据。可以在事件处理函数中使用$refs属性获取表单实例，并调用resetFields()方法进行重置。

示例代码如下：

<template>
  <el-dialog :visible.sync="dialogVisible">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        phone: '',
      },
    }
  },
  methods: {
    submitForm() {
      // 提交表单的代码

      // 重置表单
      this.$refs.form.resetFields()
    },
  },
}
</script>

示例2：重置多个表单

例如，有一个Vue组件中展示了一个对话框，这个对话框有两个表单，一个用于收集用户的姓名和手机号码，另一个用于收集用户的密码。当用户提交表单或者关闭对话框时，需要清空这两个表单中的数据。可以将这两个表单的引用保存在data中，在事件处理函数中遍历这些表单并调用resetFields()方法进行重置。