vue：element-ui问题小记

resetFields()方法重置表单后无法再次编辑

添加新数据时加了重置方法，但是点击调用resetFields()，再次编辑数据无法写入input中。查看Form 表单用法发现resetFields()对整个表单进行重置，将所有字段值重置为初始值并移除校验结果没有追溯到底层代码，这里还需要再次研究，如果又小伙伴知道，麻烦指导下。

Form Methods

解决办法
移除表单项的校验结果，清空运行内存中的数据的的值。

     // 重置表格数据
      resetForm(formName) {
        this.$refs[formName].clearValidate();
        this.product_data = {
          name:'',
          code:'',
          priority:'',
          bucket:'',
          description:''
        };
      },

修改数据某一条表单数据时，是确定还是取消，表格的数据也会跟随修改

一直以为是传错数据或是在某个位置改掉了内存中的数据，找了半天也没有看到修改原始数据的代码，最后发现是数据深浅拷贝的问题。因为row是Object对象类型，如果直接赋值的话this.product_data = row)，就变成了浅拷贝，复制的是地址，导致在表单中改变值的时候table中的数据也跟着改变，所以要进行深拷贝，利用json就可以了，改成下面就行了。

 // 编辑数据
      handleUpdateAction(index, row) {
        this.dialogVisible = true;
        this.dialogTitle = "编辑产品";
        this.isEdit = true;
        this.product_data = JSON.parse(JSON.stringify(row))
      },

补充：js中有两种不同的数据类型，一个是基本类型，一个是引用类型，其中Object是引用类型浅拷贝复制的是引用，深拷贝复制的是实体，简单的说，就是如果b复制a，现在修改b，如果a跟着改变，这种就是浅拷贝如果a不变，就是深拷贝。

[Vue warn]: You may have an infinite update loop in a component render function. 这是一个死循环的报错

数据导致组件呈现函数中可能有无限更新循环，这是首先定位你的问题点，查找是否有循环的数据。
我的问题是添加数据 使用到了from表单，重置表单时发生的报错。我在移除该表单项的校验结果的同时，也对表单的数据做了置空处理，但是表单中又涉及到了checkbox，猜测校验时插件内部有循环机制，造成了死循环。

重置表单方法 报错 1624005046(1).png