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;
    },
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐