完美实现element表格点击可修改,修改完成恢复原样

实现element表格可修改加修改时二次确认
例图:




代码如下
<template #default=“{ row,$index }”>

<input
v-model.trim=“row[item.prop]”
style=“width: 100%”
type=“text”
maxlength=“8”
ref=“theoryQtyInput”
οnkeyup=“value = value.replace(/[\u4E00-\u9FA5]|[A-Za-z]/g,‘’)”
@keyup.enter.prevent=“handleEnter(row,$index)"@blur="inputBlur(row,$index)”
/>

<span @click=“editInput(row,$index)” style=“cursor:pointer;” v-else-if=“item.label === translateTitle(‘理论库存’)”>{{ row[item.prop] }}
{{ row[item.prop] }}

data() {
return {
tabClickIndex :‘’,
editOld:‘’,

  }
},
methods:{
		handleEnter(row,$index){ // 回车确认让theoryQtyInput 失焦
		        this.$refs.theoryQtyInput[$index].blur()
		      },
	       // 失去焦点执行下一步动作
	      inputBlur(row,$index) {
	        this.save(row,$index)
	      },
      editInput(row,i){ //记录点击需要修改的数据
        this.tabClickIndex = i
        this.editOld = row['theoryQty']
      },

}