双击table修改单元格中内容

在标签 e-table 中添加一个 @cell-dblclick="tableDbEdit"

HTML代码

<div id="son-tabs" v-if="nnCodgcxmodels">
          <el-table 
          :data="riverdata" 
          border 
          height=60%
          @cell-dblclick="tableDbEdit"
          >

JavaScript代码

tableDbEdit(row, column, cell, event) {//编辑单元格数据
      //当鼠标双击单元格里面具体单元格的时候，即可对数据进行编辑操作，其实就是添加了一个输入框，最终将输入框中的数据保存下来就行了。
      
      event.target.innerHTML = "";
      let cellInput = document.createElement("input");
      cellInput.value = "";
      cellInput.setAttribute("type", "text");
      cellInput.style.width = "60%";
      cell.appendChild(cellInput);
      cellInput.onblur = function() {
        cell.removeChild(cellInput);
        event.target.innerHTML = cellInput.value;
        // 修改的单元格的表头名称
        var name = column.property
        row[name] = cellInput.value
      };
    }

本文地址：https://blog.csdn.net/lkrdmm/article/details/109242882