element resetFields未生效解决

resetFields真的是个难搞的方法之前遇到过resetFields方法浏览器报undefind上一篇文章已经解决

现在出现resetFields没有起到重置form表单初始数据作用但是可以重置表单校验数据 

遇到问题代码问题：先调用编辑回显再调用新增resetFields没有起到重置表单初始数据作用

        data() {
            return {
                form: {
                    id: null,
                    name: null,
                },
            };            
            //编辑回显
           editDevice: function () {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields();
                }
                    this.$http.put("/device/read/detail", {
                        id: this.multipleSelection[0].id
                    }).then(function (res) {
                        if (res.data.code == 200) {
                            //打开form表单对话框
                            this.adddialog = true;
                            //回显数据
                            this.form = res.data.data;
                        }
                    })
                } 
            },
            //新增
            addDevice: function () {
                this.title = "【新增】设备管理";
                this.adddialog = true;
                this.$refs['form'].resetFields();
            },

原因表格组件resetFields跟数据值没什么关系，只跟表单项创建时的初始值有关。

也就是说新增是resetFields时生效的只是form将编辑回显后的数据当作form的初始化值所以重置的是会先后的值这点也可以通过反复编辑进行验证

解决方法1：

             //编辑回显
           editDevice: function () {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields();
                }

                    this.$http.put("/device/read/detail", {
                        id: this.multipleSelection[0].id
                    }).then(function (res) {
                        if (res.data.code == 200) {
                            //打开form表单对话框
                            this.adddialog = true;
                            //回显数据
                            setTimeout(function () {
                                this.form = res.data.data;
                            }.bind(this), 0);
                        }
                    })
                } 
            },

 

解决方法2

             //编辑回显
           editDevice: function () {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields();
                }

                    this.$http.put("/device/read/detail", {
                        id: this.multipleSelection[0].id
                    }).then(function (res) {
                        if (res.data.code == 200) {
                            //打开form表单对话框
                            this.adddialog = true;
                            //回显数据
                            this.$nextTick(function(){
                                this.form = res.data.data;
                            })
                        }
                    })
                } 
            },