使用 cell-dblclick 实现elementUi 表格 双击编辑单元格

<template>
  <el-table :data="tableData" style="width: 100%" @cell-dblclick="cellDbClick">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>
  
  <script  setup>
const showEdit = [2];
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const cellDbClick = (row, column, cell, event) => {
  console.log(row, column, cell, event);
  event.target.innerHTML = "";
  let cellInput = document.createElement("input");
  cellInput.value = row[column.property];
  cellInput.setAttribute("type", "text");
  cellInput.style.width = "60%";
  cellInput.style.marginLeft = "10px";
  cellInput.style.paddingLeft = "5px";
  cell.appendChild(cellInput);
  //   聚焦
  cellInput.focus();
  //失焦事件
  cellInput.onblur = function () {
    cell.removeChild(cellInput);
    event.target.innerHTML = cellInput.value;
    row[column.property] = cellInput.value;
  };
};
</script>

<style>
</style>