用ElementUI 表格实现双击单元格，将单元格内容变为输入框，输入框失去焦点修改并保存

思路：

1单元格双击点击事件获取当前单元格的dom

2移除单元格下面class='cell'这个dom

3新增一个input，把child的Dom里面的文字给input

4.给input绑定一个blur事件离开的时候把值给child

5blur事件中最后移除input事件并且重新插入child

备注：dom结构图已经附上在结尾。cell-dblclick是ElementUI双击单元格事件并获取到row, column, cell, event 这4个回调参数

代码：

<template>
  <el-table :data="tableData" style="width: 100%" @cell-dblclick="dblclick">
    <el-table-column prop="date" label="Date" width="180" ref="column1" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
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',
  },
]
//1.单元格双击点击事件获取当前单元格的dom
const dblclick=(row,column,cell, event)=>{
  let child=cell.firstChild
  cell.firstChild.remove()
  const input = document.createElement('input');
  input.setAttribute('type', 'text');
  cell.appendChild(input);
  input.value=child.outerText
  input.addEventListener('blur',(e)=>{
     cell.firstChild.remove()
     console.log(e.target.value)
     child.innerText=e.target.value
     cell.appendChild(child);
  })
}
</script>

结尾：小菜鸡第一次写，有不足的还请大佬温柔补充。