el-dialog和el-form搭配使用时无法重置表单的问题

博客聚焦模态框与表单组合出现无效的情况,提出解决办法。即在onReset()方法中做处理,等模态框加载完成后,执行反向绑定操作,将表单内容赋值给绑定对象,再进行重置操作。

前言

模态框+表单的组合十分普遍,你有没有遇到this.$ref[formName].resetFields()无效的情况?

解决

在onReset()方法中做一点小手脚

onReset(formName){
  this.$nextTick(() => {
        this.formLabelAlign = formName;//formLabelAlign是我form表单绑定的对象
      });
   this.$refs[formName].resetFields();
  }

原理就是等模态框加载全部完成以后,执行一个反向绑定的操作,表单填写的内容赋值给绑定的对象,然后再执行一遍重置操作

### 优化 Element UI `el-dialog` 中 `el-form` 表单样式的策略 为了提升用户体验并使表单更加美观,可以采取多种方式来优化 `el-dialog` 内部的 `el-form` 组件样式。以下是几种有效的方法: #### 使用自定义类名调整布局 通过为 `el-form-item` 添加特定的 class 类,能够灵活控制各个输入项之间的间距以及整体外观。 ```html <template> <el-dialog title="用户信息" :visible.sync="dialogVisible"> <!-- 自定义class名称 --> <el-form label-width="80px" class="custom-form-style"> <el-form-item label="姓名" prop="name" class="item-name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age" class="item-age"> <el-input-number v-model="form.age"></el-input-number> </el-form-item> ... </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="closeDialog">取 消</el-button> <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button> </span> </el-dialog> </template> ``` #### 利用 CSS 进一步美化界面 借助外部样式文件或 `<style scoped>` 标签中的局部样式规则,可实现更精细的设计效果。例如设置不同的字体大小、颜色、边距等属性[^1]。 ```css <style scoped> .custom-form-style .el-form-item { margin-bottom: 20px; } .item-name, .item-age { font-size: 16px; color: #333; } </style> ``` #### 动态加载表单项以提高性能 当表单较为复杂,考虑采用按需渲染的方式减少初始加载间。利用 Vue 的条件渲染指令 (`v-if`) 动态组件特性,可以在必要刻才创建某些表单项实例[^2]。 ```javascript data() { return { dialogVisible: false, formLoaded: false, // 控制子组件是否显示 form: {} }; }, methods: { openDialog() { this.dialogVisible = true; setTimeout(() => (this.formLoaded = true), 50); // 延迟初始化表单内容 }, closeDialog() { this.formLoaded = false; // 销毁表单实例 this.$nextTick(() => (this.dialogVisible = false)); } } ``` #### 清除验证状态保持良好交互体验 为了避免不必要的错误提示影响操作流程,在关闭对话框之前应当重置所有已有的校验结果。这可以通过调用 `$refs['rules'].resetFields()` 方法完成。 ```javascript methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (!valid) return; // 提交逻辑... alert("提交成功!"); this.closeDialog(); }); }, closeDialog() { this.$refs.ruleForm.resetFields(); // 清理验证状态 this.formLoaded = false; this.$nextTick(() => (this.dialogVisible = false)); } } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

商朝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值