Vue3+Element Plus 关于Dialog弹出Form表单，使用resetFields重置无效的解决-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3+Element Plus 关于Dialog弹出Form表单，使用resetFields重置无效的解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

主要参考了element-plus官方的表单重置按钮（官方Form例子任意reset按钮），然后试了试他的ref绑定，发现可以完美解决重置问题。

第一步：给Form表单绑定ref。绑定ref 的值为ref<FormInstance>();这里注意表单el-form-item必须有prop属性。

    <el-dialog v-model="data.userDialog" v-bind:title="data.userModelTitle">
      <el-form
        :inline="true"
        ref="modelForm"
        :model="data.user"
        label-position="right"
      >
        <el-form-item label="工号" label-width="70px" prop="userCode">
          <el-input v-model="data.user.userCode" />
        </el-form-item>
        <el-form-item label="姓名" label-width="70px" prop="userNameCn">
          <el-input v-model="data.user.userNameCn" />
        </el-form-item>
        <el-form-item label="手机号" label-width="70px" prop="phone">
          <el-input v-model="data.user.phone" />
        </el-form-item>
        <el-form-item label="部门" label-width="70px" prop="deptId">
          <el-cascader
            v-model="data.user.deptId"
            ref="deptCascader_add"
            :options="data.deptTree"
            :props="treeProps"
            @change="deptAddChange"
            filterable
            clearable
            class="select-width"
          />
        </el-form-item>
        <el-form-item label="角色" label-width="70px" prop="roleId">
          <el-select v-model="data.user.roleId" class="select-width">
            <el-option label="员工" :value="2" />
            <el-option label="临时推广员" :value="3" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.userDialog = false">取消</el-button>
          <el-button
            type="primary"
            @click="
              data.dialogSubmitStatus === 'add' ? addUser() : updateUser()
            "
          >
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>

const data = reactive({
  userDialog: ref(false),
  dialogSubmitStatus: "",
  user: {
    id: null,
    userCode: "",
    userNameCn: "",
    deptId: "",
    roleId: null,
    phone: "",
    deptName: "",
    roleName: ""
  },
  userModelTitle: ""
});
const modelForm = ref<FormInstance>();
// 重置表单方法
const restForm = (formEl: FormInstance | undefined) => {
  formEl.resetFields();
};

2.第二步：在你想要重置的地方调用重置表单方法即可。本人是在新增或修改成功后再重置，这个看自己需求就行。具体调用如下：

const addUser = () => {
  console.log("新增：" + data.user);
  restForm(modelForm.value);
};
const updateUser = () => {
  console.log("修改：" + data.user);
  restForm(modelForm.value);
};

有谁知道FormInstance，可以说下。因为我遇到的时候只是为了解决问题，并没有深入了解，如果有错误的地方欢迎指出。文章来源地址https://www.toymoban.com/news/detail-813157.html

到了这里，关于Vue3+Element Plus 关于Dialog弹出Form表单，使用resetFields重置无效的解决的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！