element-ui的resetFields()方法 在编辑回显后再新增时 不生效的原因及解决方法

1、问题原因

项目描述：因避免代码冗余，新增、编辑、查看采用统一弹出框

出现问题：编辑 或 查看数据回显后，调用 that.$refs[“formName”].resetFields() 方法不生效，即数据还是上次 编辑 或 查看 后的数据，没有清空

问题原因：当我们在进入页面后，第一次打开弹出框时，紧接着就设置数据的回显，但在这时，因为弹出框还未执行完毕，这时候的 form 的初始值会被设置为回显的值，所以在调用 that.$ref[“formName”].resetFields() 时 form 看起来像是没有重置

2、element-ui 官方文档

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 中 绑定的值相对应；

5、仔细检查代码