elementplus清空表单

### Element Plus 清空表单的方法 在 Vue 项目中使用 Element Plus 的表单组件时，可以通过 `resetFields()` 方法来清空表单并将其重置为初始值。然而，为了确保该方法能够正确工作，需注意以下几点： 1. **`prop` 属性的必要性** 每个 `<el-form-item>` 组件都必须绑定 `prop` 属性，这与表单模型中的字段相对应[^2]。如果没有设置 `prop` 属性，则 `resetFields()` 方法可能无法正常生效。 2. **初始值的重要性** 调用 `resetFields()` 后，表单会被重置为其定义时的初始值，而非完全清除内容。因此，在动态更新表单数据（如编辑操作）后再切换至新增模式时，需要特别处理以恢复原始初始值[^2]。 以下是基于 Element Plus 实现的一个完整的表单清空示例代码： ```javascript <template> <el-dialog v-model="dialogVisible" title="示例表单"> <el-form :model="form" ref="formRef" label-width="100px"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model="form.age"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="handleClose">取消</el-button> <el-button type="primary" @click="submitForm">提交</el-button> </div> </el-dialog> </template> <script> import { reactive, toRefs, ref } from 'vue'; export default { setup() { const dialogVisible = ref(false); const formRef = ref(null); const state = reactive({ form: { name: '', age: '' } }); const submitForm = () => { console.log('提交表单:', state.form); }; const handleClose = () => { dialogVisible.value = false; if (formRef.value) { formRef.value.resetFields(); } Object.assign(state.form, { name: '', age: '' }); }; return { ...toRefs(state), dialogVisible, formRef, submitForm, handleClose }; } }; </script> ``` #### 关键点解析 - 使用 `ref="formRef"` 将表单实例挂载到模板变量中，以便后续通过 `this.$refs.formRef.resetFields()` 或者组合式 API 中的 `formRef.value.resetFields()` 来调用重置功能。 - 在关闭对话框前执行 `resetFields()` 并重新初始化 `state.form` 对象的内容，从而彻底清理表单状态[^1]。 --- ### 注意事项 当遇到先编辑后新增的情况时，由于编辑过程中可能会改变表单的数据结构或默认值，建议采用 `$nextTick` 确保 DOM 更新完成后再进行赋值或其他逻辑操作[^2]。 ---