element表格双击单元格修改单元格的数据（详细注释）

<el-table
   :data="tableList"
    @cell-dblclick="tableEdit"
>
    <el-table-column label="列1" align="center">
       <template slot-scope="scope">{
    
    {
    
     scope.row.type }}</template>
   </el-table-column>
   <el-table-column label="列2" align="center">
       <template slot-scope="scope">{
    
    {
    
     scope.row.frameNumber }}</template>
   </el-table-column>
</el-table>

这里就比较简单的创建一个表格，拥有两个列，这里注意一定要给表格绑定双击事件属性，不然监听不到双击事件。

//@cell-dblclick有四个默认的返回参数，具体包括什么这里可以自己打印一下看看。
tableEdit(row, column, cell, event) {
    
    
//如果这里只想编辑某一列或几列判断一下就行：column.label === '列1'
   if (column.label) {
    
    
   //取出单元格的值
        var beforeVal = event.target.textContent;
        //置空单元格容器内元素
        event.target.innerHTML = "";
        //替换成el-input
        let str = `<div class='cell'>
            <div class='el-input'>
              <input type='text' placeholder='请输入内容' class='el-input__inner'>
            </div>
        </div>`;
        cell.innerHTML = str;
         获取双击后生成的input  根据层级嵌套会有所变化
        let cellInput = cell.children[0].children[0].children[0]; 
        cellInput.value = beforeVal;
        cellInput.focus(); // input自动聚焦
        // 失去焦点后  将input移除
        cellInput.onblur = function() {
    
    
          let onblurCont = `<div class='cell'>${
      
      cellInput.value}</div>`;
          cell.innerHTML = onblurCont; // 换成原有的显示内容
          // 调用axios接口
        };
      }
}

https://blog.csdn.net/whicce/article/details/112670942