vue+elementui實現動態添加行/可編輯的table

<el-col :span="24">
    <el-form-item label="與承租戶同戶籍成員:" :label-width="formLabelWidth">
        <el-table :data="zichandetail.members" :border=true style="width: 99.99%;">
            <el-table-column type="index" label="序號" width="100"></el-table-column>
            <el-table-column prop="name" label="姓名" width="150">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.name" autocomplete="off" size="small"
placeholder="請輸入姓名"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="與承租人關系" width="150">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.relationship" autocomplete="off" size="small" placeholder="請輸入與承租人關系"></el-input>
                </template>
             </el-table-column>
             <el-table-column prop="name" label="聯系電話" width="150">
                 <template slot-scope="scope">
                     <el-input v-model="scope.row.mobile" autocomplete="off" size="small"
placeholder="請輸入聯系電話"></el-input>
                 </template>
             </el-table-column>
             <el-table-column prop="name" label="出生年月" width="150">
                 <template slot-scope="scope">
                     <el-date-picker v-model="scope.row.birthday" type="month" placeholder="請輸入出生年月" value-format="yyyy-MM" size="small" class="allwidth">
                     </el-date-picker>
                  </template>
              </el-table-column>
              <el-table-column prop="name" label="工作單位">
                  <template slot-scope="scope">
                      <el-input v-model="scope.row.gongzuodanwei" autocomplete="off" size="small" placeholder="請輸入工作單位"></el-input>
                  </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                  <template slot-scope="scope">
                      <el-button size="mini" type="danger" plain @click="delmembers(scope.$index, scope.row)">刪除</el-button>
                  </template>
              </el-table-column>
         </el-table>
         <i class="el-icon-circle-plus-outline" @click="addmembers"></i>
      </el-form-item>
   </el-col>
</el-row>

addmembers() {
   console.log('與承租戶同戶籍成員');
   var member = this.zichandetail.members;
   console.log(member);
   var length = member.length;
   this.zichandetail.members.push(
   {
      id: parseInt(length),
      name: '',
      relationship: '',
      mobile: '',
      birthday: '',
      gongzuodanwei: '',
   })
 },

delmembers(index, row) {
   var that = this;
   this.$confirm('確認刪除嗎?', '提示', {
   confirmButtonText: '確定',
   cancelButtonText: '取消',
   type: 'warning'
   }).then(() => {
      //點擊確定的操作(調用接口)
      var hasmembers = that.zichandetail.members;
      for (var i = 0; i < hasmembers.length; i++) {
          if (row.id == hasmembers[i].id) {
              that.zichandetail.members.splice(i, 1);
              // this.$message({ message: '刪除成功', duration: 2000, type: 'success' });
           }
       }
     }).catch(() => {
     //點取消的提示
         return;
     });
},