vue3 和 element-plus 实现指定单元格编辑

思路

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
  //在此处调接口传数据
}