思路：

1.  获取到指定单元格的位置   2. 通过状态来判断 是否展示编辑

步骤：

1. 定义一个变量 去确定行和列

let tableRowEditId = ref(null), // 控制可编辑的每一行
let tableColumnEditIndex = ref(null), //控制可编辑的每一列

2. 在el-table 上 绑定 单元格的点击事件 cell-click(单击) cell-dblclick(双击) 在该事件上可以解构出是 row 和 column  确定点击的单元格的位置 

 <el-table
   :data="tableData"
   style="width: 100%"
   border
   @cell-click="showUnitInput"
  >

</el-table>


const showUnitInput = (row: any, column: any) => {
  // console.log('row', row)
  // console.log('column', column)
  //赋值给定义的变量
  tableRowEditId.value = row.id //确定点击的单元格在哪行 如果数据中有ID可以用ID判断，没有可以使用其他值判断，只要能确定是哪一行即可
  tableColumnEditIndex.value = column.id //确定点击的单元格在哪列 
}

3. 在指定的单元格上点击显示输入框(编辑)  input是放在的el-table-item的插槽中，可以解构出 row和 column 确定输入框的位置

4. 然后通过这两个值去比较  进行显示隐藏 

5. 当输入框失去焦点或者触发了键盘的回车键，将判断条件的值清空即可

<el-table-column
  prop="xxxxx"
  label="xxxxx"
  >
   // 判断input框所在的单元格的位置是否和赋值的变量的值一致，一致就显示 否则显示其他的
   //@blur @keyup.enter 失去焦点事件和 键盘按下回车事件
  <template #default="{ row, column }">
   <el-input
    v-if="
     tableRowEditId === row.id &&
     tableColumnEditIndex === column.id
    "
    @blur="blurValueInput(row, column)"
    @keyup.enter="blurValueInput(row, column)"
   />
     <span v-else>{{ row.value }}</span>
   </template>
 </el-table-column>


const blurUnitInput = (row: { [x: string]: boolean }, column: any) => {
  tableRowEditId.value = null
  tableColumnEditIndex.value = null
  //在此处调接口传数据
}