Vue学习-编辑table表格行数据，行数据消失

问题描述：

如下两张图所示，选中table表格中的某一行数据进行编辑，form表单中出现table行回显数据，点击取消。再次选中同一行数据进行编辑，发现form表单回显数据以及选中的table行数据也消失。

this.mtitle = "修改科目";
this.modalType = 1;
this.$refs.form.resetFields();
let v = params.row;
for (let attr in v) {
  if (v[attr] == null) {
    v[attr] = ''
  }
}
this.form = v;
this.modalVisible = true;

原因分析：

以下是自己所想，若有问题请指出

代码中使用this.$refs.form.resetFields()对form表单值进行清空初始化。而table行数据(params.row)赋值于form表单值(this.form = v),这里是一种双向绑定，当form表单值清空初始化了，那么table行数据也被清空初始化。

解决方案：

通过添加中间值进行处理。将table行数据(params.row)赋值于中间值并切断中间值与table行数据的联系(let str = JSON.stringify(v))。将中间值赋值给form表单值(let data = JSON.parse(str) 、this.form = data;)。当form表单值清空初始化了，也只会影响中间值，不会影响table行数据。

this.mtitle = "修改科目";
this.modalType = 1;
this.$refs.form.resetFields();
let v = params.row;
for (let attr in v) {
  if (v[attr] == null) {
    v[attr] = ''
  }
}
let str = JSON.stringify(v)
let data = JSON.parse(str)
this.form = data;
this.modalVisible = true;