我亲爱的你，有两副面孔：表格末尾添加新内容

0. 缘起

要在第二行下面新起一行，来添加新数据。这个我特么还真没想到怎么做。继续抄了组长代码，发现有个很巧妙的地方，同一个form既可以用作编辑，也可以用来新增，就用一个小小的判断语句即可。

1. 做法

 
      
        
      
      
        
      
//...

// Change
    handleChange(row) {
      this.selectId = row.id;
      this.form = JSON.parse(JSON.stringify(row));
      this.form.publishTime = this.getTimeStamp();
    },
// Add
  handleAdd() {
      this.form = {
        id: "add",
        version: "",     
        description: "",
      };
      this.tableData.push(JSON.parse(JSON.stringify(this.form)));
      this.selectId = "add";
    },  
     // Two kind exit
    handleExit() {
      if (this.selectId === "add") {
        this.tableData.splice(length - 1, 1);
      }
      this.selectId = "";
      this.form = {};
    },
        

添加方法将一个id为add的form数据，黏在了表格数据里，这样显示出来的，便是最后一行修改项，非常的优雅与巧妙。

要注意的是，HandleSave方法要用一个flag来判断是新增还是修改。

2. 时间戳获取

2021-10-11 12:11:11

    getTimeStamp() {
      let date = new Date(),
        hour = date.getHours(),
        min = date.getMinutes(),
        sec = date.getSeconds();
      let str = date.toLocaleDateString().replace(/\//g, "-");
      return `${str} ${hour < 10 ? "0" + hour : hour}:${
        min < 10 ? "0" + min : min
      }:${sec < 10 ? "0" + sec : sec}`;
    },