element组件问题

简介: element组件问题

给弹窗添加关闭时的事件:
method:{
handleClose(){
this.refs.dialogForm.resetFields(); this.dialogVisible = false; } } //注:表单重置一定要添加prop属性和ref属性。prop属性绑定输入框绑定的值,ref不能和其他表单重复 本以为这么做就已经好了,等到自己测试的时候发现点击修改后再点击新增,重置按钮好像没有生效,但是又好像生效了,就再往上查了下,才知道问题出现在哪。 先说this.
refs.dialogForm.resetFields();的作用:对整个表单进行重置,将所有字段值重置为初始值并移除校验结果
注意是所有字段值是重置为初始值,而不是清空值。
有什么区别呢,就比如我刚做的,因为表单是在弹窗里,弹窗默认是关闭状态,里面的数据没被初始化,新增和修改都可以打开弹窗,如果先点击的是新增,表单里的值初始化就是为空的,空就是初始值,但是如果先点击的是修改,表单里的初始值就是打开的回显的数据。
这就是为什么重置有时生效有时又不生效,而有时又好像部分生效的原因。
找到原因后就要找到解决办法,
//修改方法
amend(code) {
this.dialogVisible = true;
this.nextTick(() => {
// 注意看这里 以下是回显方法 }) } this.
nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

相关文章
|
1月前
|
JavaScript 前端开发
vue element plus Empty 空状态
vue element plus Empty 空状态
62 0
vue element plus Empty 空状态
|
1月前
使用element clickoutside自定义指令事件,点击元素外部触发(element-ui/src/utils/clickoutside)
使用element clickoutside自定义指令事件,点击元素外部触发(element-ui/src/utils/clickoutside)
|
1月前
|
JavaScript 容器
vue element plus Container 布局容器
vue element plus Container 布局容器
94 0
|
7月前
element组件里的tree树形控件的使用?
element组件里的tree树形控件的使用?
|
1月前
|
资源调度 JavaScript 开发者
如何强制安装element-ui
如何强制安装element-ui
40 0
|
1月前
|
JavaScript 索引
Vue3——element-plus表格组件怎样得到当前行的id
Vue3——element-plus表格组件怎样得到当前行的id
121 0
|
6月前
|
前端开发 JavaScript CDN
【 Element UI 】—Element UI 的基本使用
【 Element UI 】—Element UI 的基本使用
|
7月前
|
CDN
element-ui本地使用
element-ui本地使用
Element Plus 日期选择器的使用和属性
Element Plus 日期选择器的使用和属性
|
10月前
element-ui中的prop 的相关作用
element-ui中的prop 的相关作用
314 0