vue+eltable 实现双击修改表格内容并提交

要实现表格填报功能，后台存储的是表格的数据结构，从后端获取json数组后，传给页面展示

页面采用cell-click时通过控制 flag值来确定时显示内容还是 input框

<el-table :data="tableData" border   @cell-click="cellDblClick">
	  <!-- <el-table-column label="id主键" align="center" prop="inspectId" /> --> 
	   <el-table-column label="检查项目" align="center" prop="name" />
	   <el-table-column prop="result" label="检查结果" >
		     <template slot-scope="{ row}" >
		        <!-- <span v-if="!scope.row.isEditCell" style="cursor:pointer"> {{resultFormat(scope.row.result)}}
		        </span> -->
					    <el-radio   v-model="row.result"   
					      v-for="dict in resultOptions"
					      :key="dict.dictValue"
					      :label="dict.dictValue"
					    >{{dict.dictLabel}}</el-radio>
<!-- 		       <el-button v-if="scope.row.isEditCell" type="success" icon="el-icon-check" size="mini" @click="submitName(scope.row)"></el-button> --> 
		     </template>
		  </el-table-column>
		  <el-table-column label="检查标准" align="center" prop="checkStandard" width="350" />
		 <el-table-column prop="hitch" label="发生故障位置" >
			 <template slot-scope="scope">
				<span v-if="!scope.row.isEditCell" style="cursor:pointer">{{scope.row.hitch}}
				</span>
				<el-input v-if="scope.row.isEditCell"  
						  v-model="scope.row.hitch" placeholder="发生故障位置"
						   @blur="cellBlur(scope.row,scope.column)"  
						 style="width:70%" ref="hitchRef"></el-input>
						<!-- <el-button v-if="scope.row.isEditCell" type="success" icon="el-icon-check" size="mini" @click="submitName(scope.row)"></el-button> -->
			 </template>
		  </el-table-column>
		  <el-table-column prop="remark" label="备注">
		  			 <template slot-scope="scope">
		  				<span v-if="!scope.row.isEditCell" style="cursor:pointer">{{scope.row.remark}}
		  				</span>
		  				<el-input v-if="scope.row.isEditCell"  
		  						  v-model="scope.row.remark" placeholder="请输入备注"
		  						 @blur="cellBlur(scope.row,scope.column)"  
		  						 style="width:70%" ref="remarkRef"></el-input>
		  			 </template>
		  </el-table-column>
		  
	</el-table>

 

脚本

 data() {
        return {
		  tableData: [],
		  resultOptions:null,
		  submitData:{},
		  inspectId:''
        }
      },
	  created() {
		this.inspectId = this.$route.params && this.$route.params.inspectId;
	    this.getTableList(this.inspectId);
		this.getDicts("sys_check_result").then(response => {
		  this.resultOptions = response.data;
		});
	  },
      methods: {
	   // 获取列表
	   getTableList(inspectId) {
			 this.loading = true;
			 listInspectItem(inspectId).then(response => {
				console.log("response")
				 	 console.log(response) 	
					 	 console.log(response.data.tabledata) 	
								 
				 this.tableData = response.data;
			   this.loading = false;
			 });
			
			 console.log("this.tableData") 
			 	 console.log(this.tableData)   
			  // 遍历表数据，为每条数据添加isEditCell属性
			  var length = this.tableData.length;
			  
			  for (var i = 0; i < length; i++) {
			    this.tableData[i].isEditCell = false;
			  }
	   },
	   // 双击编辑
	   cellDblClick(row,column) {
		    console.log(column.property)
	       if (column.property == "remark" ||column.property == "result" ||column.property == "hitch") {
	           this.$set(row, "isEditCell", true);
	       }
	       this.tableData= this.tableData.filter(item => {
	         return item;
	       }) //视图刷新
		   console.log(column.property)
		    if (column.property == "remark" ) {
		      this.$nextTick(() => {
		        this.$refs.remarkRef.focus(); // 视图出现后使input获取焦点
		      })
		   }  else {
		      this.$nextTick(() => {
		        this.$refs.hitchRef.focus(); // 视图出现后使input获取焦点
		      })
		   } 
	      
	   },
	   // 可以编辑框失去焦点
	   cellBlur(row, column) {
	      row.isEditCell= false;
	       this.$set(row, 'isEditCell', false);
	   },
	    
	   // 提交
	   submitName(row) {
		 this.loading = true;
		 let data = {inspectId: this.inspectId,result:this.tableData.toString()};
		 this.submitData.inspectId = this.inspectId;
		 
		 this.submitData.ext1 =JSON.stringify(this.tableData);
		 updateInspect(this.submitData).then(response => {
		   if (response.code === 200) {
		 	 this.loading = false;
		     this.msgSuccess("修改成功");
		     this.open = false;
		     this.getTableList(this.inspectId);
		   } else {
		     this.msgError(response.msg);
		   }
		 });
	   },
	   },