el-table动态编辑表格内容

el-table动态编辑表格内容

需求样式：

点击编辑/保存按钮切换状态，value均为输入框状态

  <!-- 编辑保存按钮 -->
  <div class="">
    <el-button v-show="!editing" class="btnEdit" type="primary" @click="editAll">编辑</el-button>
    <el-button v-show="editing" class="btnEdit" type="primary" @click="saveAll">保存</el-button>
  </div>

 <el-table :data="tableData">
   <el-table-column v-for="(item, index) in tableKey" :key="index" :label="item.label" :prop="item.prop">
     <template slot-scope="scope">
        <span v-if="scope.row.show&&item.prop!='executionDate'&&item.prop!='recordComeType'">
          <el-input size="mini" placeholder="请输入内容" v-model="scope.row[item.prop]"></el-input>
        </span>
        <span v-else>{{scope.row[item.prop]}}</span>
     </template>          
   </el-table-column>
 </el-table>

   editAll(){
     this.editing = true
     this.tableData.map((i, index) => {
       i.show = true   // 显示编辑input框
       i.id = i.id||''
       i.height=i.height=='--'?i.height.replace('--',''):i.height  // 编辑时清空输入框
       this.$set(this.tableData, index, i)
     })
   },
   saveAll(){
   	 this.editing = false
     this.tableData.map((i, index) => {
       i.show = false
       this.$set(this.tableData, index, i)
     })
     let arr = []
     this.tableData.map((item,idx)=>{
       if(item.height==''){return} // 将有值的传给后台
       let obj = {execution:item.executionDate,id: item.id, height:item.height,patId:this.patId}
       arr.push(obj)
     })
     updateHeightRecord(arr).then(res=>{
       this.$message.success("更新成功");
       this.listRecord()
     })     
   },
  listRecord(){
  	let param = {...}
  	listRecord(param).then(res=>{
  	  let data = res.data
      let list = data.monitorHeightRecordDTOList
      list.forEach(item=>{
        if(!item.height){
          item.height='--'
          item.recordComeType = '--'
        }else{
          item.recordComeType = JSON.stringify(item.recordComeType)==1?'医护录入':'患者录入'
        }
      })
      this.tableData = list
    }
  }    

数据格式：