elementui el-from el-table 点击新增按钮后如果不修改数据直接点击取消，table里的数据都会被清空

在用element-ui el-from el-table 组件时遇到一个问题：

点击新增按钮跳出dialong对话框后如果不修改数据直接点击取消，table里的数据都会被清空，而且data数据里的table数据也会被响应改变

然后再点击新增时还会出现原来清空的表单项里会同步出现from里输入的数据，点击新增后原来为空的数据又出现了，新增的也添加了。（说的比较乱）

原来的代码:

    <!-- 对话框 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            width="45%"
        >
            <!-- 用户的表单信息 -->
            <el-form
                ref="form"
                :rules="rules"
                inline
                :model="form"
                label-width="70px"
            >
                <el-form-item label="姓名" prop="name">
                    <el-input
                        placeholder="请输入姓名"
                        v-model="form.name"
                    ></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input
                        placeholder="请输入年龄"
                        v-model.number="form.age"
                    ></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="form.sex" placeholder="请选择性别">
                        <el-option label="男" :value="1"></el-option>
                        <el-option label="女" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出生日期" prop="birth">
                    <el-col :span="11">
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="form.birth"
                            style="width: 100%"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="地址" prop="addr">
                    <el-input v-model="form.addr"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancle">取 消</el-button>
                <el-button type="primary" @click="submit"> 确 定 </el-button>
            </span>
        </el-dialog>

  //点击新增
        handleAdd() {
            this.modeType = 0
            this.dialogVisible = true
        },
 //编辑
        handleEdit(row) {
            console.log('row', row)

            this.modeType = 1
            this.dialogVisible = true
            //this.form = row
            
            this.$nextTick(function () {
                //注意需要对数据进行深拷贝，否则会出错
                this.form = row
                //this.form = JSON.parse(JSON.stringify(row))
            })
        },
//对话框关闭时的回调(点击×)
        handleClose() {
            //关闭对话框
            this.dialogVisible = false
            //清除from里的数据
            this.$refs.form.resetFields()
        },

原因: 如果直接将data数据给form的话，from保存data对象的逻辑地址，而这样就和其他使用data数据的地方保存方式一样，把from里的数据修改后，那些所引用data数据的地方也会改变

解决方法:

将对象进行深拷贝：改变保存的引用地址

 handleEdit(row) {
            console.log('row', row)

            this.modeType = 1
            this.dialogVisible = true
            //this.form = row
            
            this.$nextTick(function () {
                //注意需要对数据进行深拷贝，否则会出错
                this.form = JSON.parse(JSON.stringify(row))
            })
        },