在table表单里点击编辑后再点击弹框中的取消触发resetForm事件,第二次及以后点击完编辑及取消后table列表后面的数据都变成第一次点击编辑里的数据, 解决方法:this.$nextTick(()=>{ this.$refs[formName].resetFields();
在这个示例中,我们定义了一个包含用户名和密码的表单,并提供了提交和重置按钮。点击重置按钮时,会调用 resetForm 方法,该方法通过 this.$refs[formName].resetFields() 来重置表单。 希望这些信息能够帮助你实现 el-form 表单的重置功能。如果你有任何其他问题,请随时告诉我!
即prop=a,v-model=Form.a,Js中表单数据字段Form:{ a:'', b: [] },需要一一对应,不能出现差错。 3:<el-button @click="resetForm('ruleForm')">重置</el-button>resetForm(formName)的参数一定要和el-form中ref ="formName"一致。 2、个人案例 项目开发过程中,通常el-form都是嵌套在el-dialog中。
<el-button click="resetForm('form')">重置</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { formData: { name: '', age: 0 }, rules: { name: [ { required: true, message: '请输入尊称', trigger: 'blur' } ], age: [ { requi...
el-form resetForm()表单重置 this.$refs[formName].resetFields() 表单重置有时候部分字段不清空,或者完全不起效果 请检查以下必备 必须具备: 1、el-form绑定model 2、带有ref 3、el-form-item绑定prop 注: 1、修改完之后可能需要强刷浏览器 2、如果el-form实在el-dialog里面,记得使用...
form: { username: '', // 表单字段的初始值 // 其他表单字段数据... } }; }, methods: { resetForm() { // 获取表单字段的初始值 const initialValues = this.$refs.formRef.$data; // 假设只有username这一个字段需要重置 // 将表单字段设置为初始值 this.$set(this.$refs.formRef.data, 'use...
form: { arrayField: ['value1', 'value2', 'value3'] //初始的数组字段值 } }; }, methods: { resetForm() { this.$refs.form.resetFields(); //重置整个表单 } } }; </script> 在这个示例中,我们在el-form组件中使用了一个包含数组字段的表单。当单击"重置表单"按钮时,将会调用resetForm方法,...
Vue.prototype.resetForm = resetForm 1. 赋值为从第三方js中引入的resetForm方法。其中badao.js用来存放一些通用的工具类方法。 import { resetForm } from "@/utils/badao"; 1. 在引入来源的badao.js中 // 表单重置 export function resetForm(refName) { ...
<el-formref="form":model="form":rules="rules"label-width="100px"> 绑定的表单的model下的要清空的所有的输入框对应的prop的属性设置为undefined, 然后再执行重置的操作。 将重置方法抽出为全局方法 首先在main.js中挂载一个全局方法 Vue.prototype.resetForm = resetForm ...
<el-input v-model.number=\"formData.age\"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type=\"primary\" @click=\"submitForm\">提交</el-button>\n <el-button@click=\"resetForm\">重置</el-button>\n </el-form-item>\n </el-form>\n </div>\n</template...