el-table动态添加行

<template>
  <div class="haplotype-detail">
    <div class="table-box" style="display:flex;">
      <el-table
        :header-cell-style="{background:'#f2f2f2'}"
        :data="tableData"
        style="width: 97%;"
        class="list-table"
        border>
        <el-table-column label="序号" align="center" width="60">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
          <el-table-column  v-for="(item,index) in tableHeader" :key="index"  align="center" :prop="item.nameEn" class-name="cellDefault">
            <template  slot="header" slot-scope="scope">
              <span>{{item.name}}</span>
            </template>
          <template slot-scope="scope">
            <span v-if="scope.row.isEdit === false" slot="content">{{scope.row[item.nameEn]}}</span>
            <el-input v-if="scope.row.isEdit === true" v-model="scope.row[item.nameEn]" @input="setInputVal" class="name-input"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.isEdit === true" @click="saveBtn(scope.row)">保存</el-button>
            <el-button type="text" v-if="scope.row.isEdit === false" @click="editRowBtn(scope.row)">编辑</el-button>
            <el-button type="text" @click="deleteRowBtn(scope.row,scope.$index)">删除</el-button>
            <el-button type="text" v-if="scope.row.isEdit === true" @click="cancelBtn(scope.row,scope.$index)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="add-line" @click="addParamsSetting">+</div>
  </div>
</template>
<script>
export default {
  name: "haplotypeDetail",
  data() {
    return {
      // 表头列表数组
      tableHeader:[
        {
        name:'项目名称',
        nameEn:'projectName'
        },
        {
        name:'部门',
        nameEn:'deptId'
        },
        {
        name:'操作人',
        nameEn:'operationName'
        },
        {
        name:'备注',
        nameEn:'remark'
        }
      ],
      tableData: [
        {id:1,isEdit:false,projectName:'项目开始',deptId:'部门',operationName:'七大姑',remark:'操作了...'},
        {id:2,isEdit:false,projectName:'项目开始',deptId:'部门',operationName:'八大姨',remark:'操作了...'},
        {id:3,isEdit:false,projectName:'项目开始',deptId:'部门',operationName:'三姑',remark:'操作了...'},
        {id:4,isEdit:false,projectName:'项目开始',deptId:'部门',operationName:'四大爷',remark:'操作了...'}
      ],
      rowList_Copy:{}, // 复制当前行数据，用于点击取消时恢复
    };
  },
  methods: {
    // 新增行
    addParamsSetting () {
      let item = {
        operationName: "",
        deptId: "",
        remark: "",
        projectName: "",
        isEdit:true
      };
      var isSave = false
      this.tableData.forEach(element => {
        if (element.isEdit === true) {
          this.$message({
            message: '只能同时编辑一行数据！',
            type: 'warning'
          })
          isSave = true
        }
      })
      if (isSave === false) {
        this.tableData.push(item)
      }
    },
    // 删除当前行
    deleteRow (index) {
      this.tableData.splice(index, 1)
    },
    // 输入内容数据的方法
    setInputVal(e) {
      console.log(e,'监听输入数据');
    },
    // 确认是否删除行
    deleteRowBtn(row, index, event) {
       this.$confirm('此操作将永久删除当前行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         this.deleteRow(index);
      }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
      });
    },
    // 保存按钮
    saveBtn(row){
      if(row.projectName === '' || row.operationName === '' || row.deptId === '' || row.remark === '') {
        this.$message({
          message: '请填写完整信息！',
          type: 'warning'
        })
      } else {
        row.isEdit = false
      }
    },
    // 编辑当前列
    editRowBtn (row) {
      this.rowList_Copy = JSON.parse(JSON.stringify(row))
      row.isEdit = true
    },
    //取消编辑
    cancelBtn(row,index){
      if(row.projectName === '' || row.operationName === '' || row.deptId === '' || row.remark === '' || row.id === undefined) {
        this.deleteRow(index)
      } else {
        row.isEdit = false
        this.$set(row,'projectName',this.rowList_Copy.projectName)
        this.$set(row,'operationName',this.rowList_Copy.operationName)
        this.$set(row,'deptId',this.rowList_Copy.deptId)
        this.$set(row,'remark',this.rowList_Copy.remark)
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.haplotype-detail{
  .add-column, .add-line{
    background:#f2f2f2;
    width:30px;
    cursor:pointer;
    font-size:30px;
    color:#409EFF;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    display: flex;
  }
  .add-line{
  height:30px;
  width:100%;
  }
  .headerBox{
  padding:0px;
  }
}
</style>