vue element 重置表单后input框无法输入的问题

可能是因为重置表单后，input框的disabled属性被设置为了true，导致无法输入。可以在重置表单的函数中，手动将所有input框的disabled属性设置为false，例如：

resetForm() {
  this.$refs.form.resetFields(); // 重置表单
  // 将所有input框的disabled属性设置为false
  let inputs = document.querySelectorAll('input');
  inputs.forEach((input) => {
    input.disabled = false;
  });
}

相关问题

vue3 element-ui from表单重置

在 Vue 3 中，可以使用 `ref` 来获取表单元素，并通过 `reset` 方法来重置表单。同时，Element UI 表单也提供了 `resetFields` 方法来重置表单。

以下是一个示例：

<template>
  <el-form ref="myForm">
    <!-- 表单项 -->
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const form = ref({
      username: '',
      password: '',
    });

    const myForm = ref(null);

    // 提交表单
    const submit = () => {
      myForm.value.validate((valid) => {
        if (valid) {
          // 表单验证通过后的操作
        } else {
          // 表单验证失败的操作
        }
      });
    };

    // 重置表单
    const reset = () => {
      form.value = {
        username: '',
        password: '',
      };
      myForm.value.resetFields();
    };

    return {
      form,
      myForm,
      submit,
      reset,
    };
  },
};
</script>

在上面的示例中，我们使用了 `ref` 来获取了表单元素，并定义了 `form` 和 `myForm` 两个变量。`submit` 方法用于提交表单，而 `reset` 方法则重置了表单数据和验证状态。在 `reset` 方法中，我们通过 `myForm.value.resetFields()` 来调用 Element UI 表单的重置方法。

element-plus重置表单

element-plus提供了resetFields方法来重置表单。在官网的示例代码中，首先需要设置el-form的ref、:model和:rules属性。然后使用ref创建一个表单实例的引用，例如`const ruleFormRef = ref<FormInstance>()`。接着使用reactive创建一个响应式的表单数据对象，例如`const ruleForm = reactive({ name: 'Hello', region: '', ... })`。再创建一个响应式的规则对象，例如`const rules = reactive<FormRules>({ name: \[{ required: true, message: 'Please input Activity name', trigger: 'blur' }, { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }, \], ... })`。最后定义一个resetForm函数来重置表单，例如`const resetForm = (formEl: FormInstance | undefined) => { if (!formEl) return formEl.resetFields() }`。通过调用resetForm函数并传入表单实例，即可实现表单的重置功能。\[1\]

另外，根据引用\[2\]的描述，也可以尝试使用resetFields方法的另一种方式来实现部分表单项的重置。可以将需要重置的表单项的prop值作为一个数组传入resetFields方法中，即可实现部分表单项的重置功能。

总结起来，element-plus提供了resetFields方法来重置表单，可以通过表单实例调用该方法来实现表单的重置功能。\[2\]\[3\]
#### 引用[.reference_title]
- *1* [重置element-plus表单 Vue3](https://blog.csdn.net/tida_yake/article/details/128275955)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Vue3+Element-Plus,重置指定表单项](https://blog.csdn.net/weixin_46873254/article/details/128233691)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue3+Element-Plus 登录功能表单重置实现十二](https://blog.csdn.net/weixin_39237340/article/details/121410461)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]