震撼！Vue3+Element Plus 弹出表单重置无忧！

前端

2023-08-25 16:33:42

在 Vue3 + Element Plus 中重置弹出表单：深入剖析

问题

在使用 Vue3 和 Element Plus 框架时，您可能会遇到一个棘手的难题：在弹出表单中，resetFields 方法无法有效重置表单字段，导致数据仍然保留。

原因解析

这个问题的根源在于 resetFields 方法的参数设置。如果不正确指定参数，表单将无法正确重置。

解决方案

要解决此问题，您需要在使用 resetFields 方法时设置 force 参数为 true。这是因为默认情况下，Element Plus 表单组件只会重置未验证通过的字段。

this.$refs.form.resetFields({ force: true });

代码示例

下面是一个完整的代码示例，演示如何使用 resetFields 方法重置弹出表单：

<template>
  <el-dialog :visible="dialogVisible">
    <el-form ref="form">
      <el-form-item label="姓名">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { ref } from 'vue';
import { ElDialog, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';

export default {
  components: { ElDialog, ElForm, ElFormItem, ElInput, ElButton },
  setup() {
    const dialogVisible = ref(false);
    const name = ref('');
    const age = ref('');

    const submitForm = () => {
      // 表单提交逻辑
    };

    const resetForm = () => {
      this.$refs.form.resetFields({ force: true });
    };

    return {
      dialogVisible,
      name,
      age,
      submitForm,
      resetForm,
    };
  },
};
</script>