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

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

1.定义行id

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

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

 
 

 
 
const showUnitInput = (row: any, column: any) => {
  tableRowEditId.value = row.id //确定点击的单元格在哪行
  // tableColumnEditIndex.value = column.id //确定点击的单元格在哪列 
}
 

3.点击时显示输入框

或者

 

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.效果