vue+element-ui 实现table单元格点击编辑，并且按上下左右键单元格之间切换

通过我的测试我发现两个两种方法来编辑单元格的内容

第一种点击编辑：

我是给td里添加一个input，将值赋值给input，当失去焦点的时候将input的值付给td原来的内容，然后将input删除，

代码如下：

　let oldel = cell.children[0]

if (column.label != "日期") {
          if(cell.children.length>1){return} 防止点击cell再次创建input输入框
          var cellInput = document.createElement("input");
          cellInput.setAttribute("type", "text");
          cellInput.setAttribute("class", "edit");
          cellInput.value =cell.children[0].innerText;

          cellInput.style.width = "100%";
          cellInput.style.border = "none";
          cellInput.style.backgroundColor = "transparent";
          cellInput.style.paddingLeft = "10px";
          cellInput.style.outline = "none";
          oldel.style.display = " none";
          cell.appendChild(cellInput);
          cellInput.focus();　　　　//主动聚焦
          cellInput.onblur = function() {
            oldel.innerHTML = cellInput.value;
            oldel.style.display = "block";
            cell.removeChild(cellInput);
            //event.target.innerHTML = cellInput.value;
          };
      }

 

第二种方法：

通过contentEditable来控制元素可以输入编辑

代码如下：

celledit(row, column, cell, even