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

最新推荐文章于 2024-05-20 20:00:00 发布

wenzheng_du

最新推荐文章于 2024-05-20 20:00:00 发布

阅读量5.4k

点赞数 5

分类专栏： Vue+Element Plus 文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/qq_41789605/article/details/129137734

版权

Vue+Element Plus 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主要参考了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，可以说下。因为我遇到的时候只是为了解决问题，并没有深入了解，如果有错误的地方欢迎指出。