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

首先要知道是哪一行需要修改，当点击时修改，回车保存

1.定义行id

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

2.在el-table 上 绑定 单元格的点击事件 cell-click(单击)cell-dblclick(双击) 

 <el-table
   :data="tableData"
   @cell-click="showUnitInput"
  >
 
</el-table>
 
 
const showUnitInput = (row: any, column: any) => {
  tableRowEditId.value = row.id //确定点击的单元格在哪行
  // tableColumnEditIndex.value = column.id //确定点击的单元格在哪列 
}
 

3.点击时显示输入框

<template #examineItem="{ row, column }">
        <!-- @blur="blurValueInput(row, column)" -->
        <el-input
          v-model="row.examineItem"
          v-if="tableRowEditId === row.id"
          @keyup.enter="blurValueInput(row, column)"
        />
        <span v-else>{{ row.examineItem }}</span>
      </template>

或者

 <template #default="{ row, column }">
   <el-input
    v-if="
     tableRowEditId === row.id &&
     tableColumnEditIndex === column.id
    "
    @keyup.enter="blurValueInput(row, column)"
   />
     <span v-else>{{ row.value }}</span>
   </template>

4.回车或焦点消失时调用接口

const blurValueInput = (row, column) => {
  tableRowEditId.value = null;
  console.log(row.examineItem, "blurValueInput");
  // tableColumnEditIndex.value = null
  //在此处调接口传数据
  appointSaveOrUpdate({ ...row }).then((res) => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess("操作成功");
      getList();
    }
  });
};

5.效果