表格内新增和编辑

/**
 * 新增
 */
public key = ''; // key
public url = ''; // url
public addFlag = false; // 是不是add
add() {
  this.key = '';
  this.url = '';
  this.addFlag = true;
  // 新增后，所有的编辑都要取消
  this.tableList.forEach((v,k)=>{
    v.isEdit=false;
  })
}



/**
 * 编辑
 */
public originKey=''; // 初始的key，如果取消，那么需要还原回去值的
public originUrl=''; // 初始的url，如果取消，那么需要还原回去值的
edit(item) {
  console.log("edit",item);

  this.originKey=item.totalApiPrice; // key
  this.originUrl=item.totalBillPrice; // url

  // 编辑的时候，其他行都要非编辑，当前行编辑
  this.tableList.forEach((v,k)=>{
    v.isEdit=false;
  })
  item.isEdit=true; // 当前行编辑
  this.addFlag=false;
}



/**
 * 保存
 */
save(item) {
  console.log("编辑保存的时候，item：",item); // 编辑item；新增null
  if(item){
    // 编辑
    if(item.totalApiPrice==''||item.totalApiPrice.trim()==''){
      this.nzMessageService.error('KEY不可以为空');
      return false;
    }
    if(item.totalBillPrice==''||item.totalBillPrice.trim()==''){
      this.nzMessageService.error('URL不可以为空');
      return false;
    }
    this.cancel(item);
  }else {
    // 新增
    if(this.key==''||this.key.trim()==''){
      this.nzMessageService.error('KEY不可以为空');
      return false;
    }
    if(this.url==''||this.url.trim()==''){
      this.nzMessageService.error('URL不可以为空');
      return false;
    }
    this.cancel(item);
  }
}




/**
 * 取消
 */
cancel(item) {
  // add
  this.addFlag = false;
  
  // edit
  if(item){
   // 取消的时候，必须还原回去原来值
    item.totalApiPrice=this.originKey;
    item.totalBillPrice=this.originUrl;
    item.isEdit=false;
  }
}

// 编辑的时候，其他行都要非编辑，当前行编辑
// 新增后，所有的编辑都要取消
 // 编辑，参数：item；新增，参数：null

注：效果不好，还不如弹框，弹框可以共用，且有备注的时候，容易增加！

行内编辑没有共用；
且取消的时候，不能更改值！
操作按钮新增和编辑时，保存和取消是两种情况，因为没有共用。