vue中如何循环table表格数据，并可编辑的table列表（新增、删除、修改）

1.如何循环如下图table表格数据(注：emerResponseDetail为整个列表定义的数据对象)

因"作业人员"为数组workPersonList，所以使用template 先循环该数组，再循环该数组里面的字段

 <table>
     <tr><th>姓名</th><th>抢修队</th><th>操作<el-button icon="el-icon-plus"  class="greenbg fr" type="mini" @click="addWorkPerson" :disabled="isDisabled"></el-button></th></tr>
     <template v-for="(item1,index) in emerResponseDetail.workPersonList">
       <template v-if="index == 'rows'" v-for="item2 in item1">
         <tr><td>{{item2.userName}}</td><td>{{item2.teamName}}</td></tr>                    
       </template>
     </template>             
   </table>

2.怎么让table表格中获取到的数据可编辑、新增、删除

1）把获取到的数据{{item2.userName}}改成input输入框或select下拉框，并进行双向数据绑定

//到达现场时间、抢修队到达用时可编辑的写法
 <tr>
            <td>到达现场时间</td>
            <td>
              <el-date-picker
                :disabled="isDisabled"
                v-model="emerResponseDetail.teamFirstArriveTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="12:00:00">
              </el-date-picker>
            </td>
            <td>抢修队到达用时(分)</td><td><el-input  clearable :disabled="isDisabled" v-model="emerResponseDetail.teamArriveUseTime" style="width: auto;"></el-input></td>
          </tr>
//作业人员table列表
<table>
     <tr><th>姓名</th><th>抢修队</th><th>操作<el-button icon="el-icon-plus"  class="greenbg fr" type="mini" @click="addWorkPerson" :disabled="isDisabled"></el-button></th></tr>
     <template v-for="(item1,index) in emerResponseDetail.workPersonList">
       <template v-if="index == 'rows'" v-for="item2 in item1">
          <!--<tr><td>{{item2.userName}}</td><td>{{item2.teamName}}</td></tr>-->
          <tr>
             <td><el-input  clearable :disabled="isDisabled" v-model="item2.userName" style="width: auto;"></el-input></td>
             <td>
               <el-select v-model="item2.teamId" clearable placeholder="" style="width: 100%;" :disabled="isDisabled">
                 <el-option
                   v-for="item in contingencyTeam"
                   :key="item.teamId"
                   :label="item.teamName"
                   :value="item.teamId">
                 </el-option>
               </el-select>
             </td>
             <td>
               <el-button type="text" size="small" @click="delUserName(item2)" :disabled="isDisabled" class="orange">删除</el-button>
              </td>
           </tr>                  
       </template>
     </template>             
   </table>

2.新增、删除方法

 //新增作业人员
  addWorkPerson(){
  //为新增作业人员定义一个addWorkPersonForm 对象进行数据保存，并追加到列表emerResponseDetail里的workPersonList数组中
      addWorkPerson() {
        let addWorkPersonForm = {
          userName: '',
          teamId: '',
          teamName: ''
        };
        //因当列表中没有数据时，新增不上，所以加此判断，当列表中没有数据时，就新增一行空数据
        if (this.emerResponseDetail.workPersonList == null) {
          this.emerResponseDetail.workPersonList = {
            rows: []
          }
        }
        this.emerResponseDetail.workPersonList.rows.push(addWorkPersonForm)
      },
  //删除作业人员
  delUserName(item){
    var index =  this.emerResponseDetail.workPersonList.rows.indexOf(item)
    if (index !== -1) {
     this.emerResponseDetail.workPersonList.rows.splice(index, 1)
    }
  },
    //确定按钮
    saveUpdate(){
      enterButton(this.emerResponseDetail).then(res =>{
        this.getEmergencyResponseList()
        this.$message.success("修改成功！")
      })
      this.isShowDialog = false
      this.isDisabled= true;
      this.isBtnShow = false;
    },