vue.js实现了一个页面：有个table，顶上有“编辑、添加”按钮，怎么实现二者共用窗体，在来回切中不出bug

[anj3]

使用vue.js开发中遇到这样问题：table的行“编辑”和“添加”是一个窗口。因为选中行的rowObject对象有双向绑定机制在里面干扰，造成了我欲选中一行进行编辑，但是我又关闭窗口点了添加，此时添加窗口也有内容。这个怎么规避啊。

[河南棒小伙]

很好解决啊，我假设你的table是父组件，弹窗是子组件，然后子组件的展示内容是父组件通过prop属性传进去的，那么，你点编辑和点添加肯定不是同一个事件的，在不同的事件里，让弹窗弹出之前改变要传递的prop属性的值就好了，要添加时，就把之前要传递的属性数据清空不就行了？编辑时，传递的table的rowObject，这有什么矛盾呢？

[anj3]

选择一行后，你不断地来回切就会发现有bug

[讨厌走开啦]

使用v-for遍历的时候指定key，否则vue会复用元素（在你这里表现的就是切换了以后元素内的信息被保留了）。

[anj3]

问题解决了 ，方便其他网友参考。思路是通过中间变量。贴出代码Typescript代码如下：

currentRow: any = null;//行对象(从页面传来)
rowTemp: any = null;//行对象（中间变量,用于在编辑和添加来回反复切时）
currentRow: string='';//下拉框 默认值

public EditOrAddWindow(currentRow: any, wTitle: string, cName: string, conNameList: any) {
	this.winTitle = wTitle;//窗体标题
	this.conName = cName;//下拉默认值
	this.currentRow = currentRow;
	this.conNames = conNameList;//下拉 list
	if (wTitle == '添加') {
	  if (this.currentRow.Id != ""){ //currentRow有数据时才赋给rowTemp
		this.rowTemp = JSON.parse(JSON.stringify(this.currentRow));
	  }
	  this.Reset();
	} else if (wTitle == '编辑' && this.currentRow.Id == "") {//编辑窗体 且 currentRow无内容时
		this.currentRow = JSON.parse(JSON.stringify(this.rowTemp));
	}
}


//表单的每项置空
public Reset() {
	this.currentRow.Id="";//表PK 用它来判断currentRow是否为空
	this.currentRow.DictName = "";
	this.currentRow.DictAge = "";
	this.currentRow.Title = "";
}

[ღ简单]

给个小建议，只需要在点击事件里头，先加个清除，每次点击都会清除掉之前的。

[anj3]

置空方法可改更简单版：

  //表单的每项置空
  public Reset() {
    for (let key in this.currentRow) {
      this.currentRow[key]='';      
    } 
  }

[爱吃排骨]

大佬牛B啊啊啊