1、问题原因
项目描述:因避免代码冗余,新增、编辑、查看采用统一弹出框
出现问题:编辑 或 查看数据回显后,调用 that.$refs[“formName”].resetFields() 方法不生效,即数据还是上次 编辑 或 查看 后的数据,没有清空
问题原因:当我们在进入页面后,第一次打开弹出框时,紧接着就设置数据的回显,但在这时,因为弹出框还未执行完毕,这时候的 form 的初始值会被设置为回显的值,所以在调用 that.$ref[“formName”].resetFields() 时 form 看起来像是没有重置
2、element-ui 官方文档![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8545781f77821e357cc08eeb1ae229db.png)
3、问题解决
在设置回显值的时候,不要直接赋值,要在外部加上 that.$nextTick 或者 setTimeout
// 添加、编辑、查看
openResourcesDrawer(row, type) {
const that = this;
switch(type) {
case 'ADD': // 添加资源菜单
that.$data.drawerName = "添加";
that.$data.submitType = type;
that.$data.disabledStatus = false;
break;
case 'UPDATE': // 编辑资源菜单
that.$data.drawerName = "编辑";
that.$data.submitType = type;
that.$data.disabledStatus = false;
that.$nextTick(() => {
that.$data.resourcesMenuObj = Object.assign({}, row);
});
break;
case 'VISIT': // 查看资源菜单
that.$data.drawerName = "查看";
that.$data.disabledStatus = true;
that.$nextTick(() => {
that.$data.resourcesMenuObj = Object.assign({}, row);
});
break;
}
that.$data.resourcesMenuDrawer = true;
},
4、其他可能原因
4.1、el-form 表单上没有添加 ref 属性;
4.2、el-form 中 el-form-item 中没有添加 对呀的 prop 属性;prop 值 与 input 中 绑定的值相对应;