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

• 前端

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

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

    
      
        
          
        
        
          
        
        
          
        
        
          
        
        
          
            
            
          
        
      
      
        
          取消
          
            提交
          
        
      
    
const data = reactive({
  userDialog: ref(false),
  dialogSubmitStatus: "",
  user: {
    id: null,
    userCode: "",
    userNameCn: "",
    deptId: "",
    roleId: null,
    phone: "",
    deptName: "",
    roleName: ""
  },
  userModelTitle: ""
});
const modelForm = ref();
// 重置表单方法
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://net2asp.com/b6d7653349.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐