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

0. 缘起

序号	名字	年龄
1	Alice	2
2	Yuri	4

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

1. 做法

 <el-table
      fit
      :data="tableData"
      :header-cell-style="{ backgroundColor: '#e8e8e8' }"
    >
      <el-table-column label="序号" align="center">
        <template #default="{ $index }">
          <span>{{ (pageVm.page - 1) * pageVm.size + $index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="版本号" align="center">
        <template slot-scope="scope">
          <span v-if="selectId !== scope.row.id">{{ scope.row.version }}</span>
          <el-input
            v-else
            v-model="form.version"
            type="text"
            size="small"
            style="width: 300px"
          ></el-input>
        </template>
      </el-table-column>
//...
</el-table>

// 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}`;
    },