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, event) {
      cell.contentEditable = true;
      cell.focus()
}

不需要太多，只要两行就行；

上面实现了点击编辑单个单元格的功能，现在还要实现通过键盘按上下左右在不同单元格进行切换;这样更利于用户体验

 因为我使用的是Element+vue,如果你也使用的这个复制粘贴可以拿过去直接用；所以如果其他使用这个可能要进行一些改变;

let self = this;
      if (boolen == true) {
        document.onkeydown = function(e) {
          console.log(e);
          var curel = document.activeElement; //当前元素
          var curcellIndex = curel.cellIndex; // 当前元素行单元格索引
          var curRowIndex = curel.parentElement.sectionRowIndex; //当前元素行的索引；
          var curtbody = curel.parentElement.parentElement.children; //当前tbody内容的整个表单
          curel.onblur = function() {
            console.log(curel.innerText);
            self.check(curel.innerText);
          };
          if (e.keyCode == 38) {
            //按上键
            if (curRowIndex - 1 < 0) {
              curel.contentEditable = false;
              curtbody[curtbody.length - 1].children[
                curcellIndex
              ].contentEditable = true;
              curtbody[curtbody.length - 1].children[curcellIndex].focus();
            } else {
              curel.contentEditable = false;
              curtbody[curRowIndex - 1].children[
                curcellIndex
              ].contentEditable = true;
              curtbody[curRowIndex - 1].children[curcellIndex].focus();
            }
          } else if (e.keyCode == 37) {
            let preCellindex =
              curtbody[curtbody.length - 1].children.length - 1;
            console.log("preRow", curel.parentElement.children.length);
            //键盘按钮左键
            if (curcellIndex - 1 == 0) {
              if (curRowIndex - 1 < 0) {
                curel.contentEditable = false;
                curtbody[curtbody.length - 1].children[
                  preCellindex
                ].contentEditable = true;
                curtbody[curtbody.length - 1].children[preCellindex].focus();
              } else {
                curel.contentEditable = false;
                curtbody[curRowIndex - 1].children[
                  preCellindex
                ].contentEditable = true;
                curtbody[curRowIndex - 1].children[preCellindex].focus();
              }
            } else {
              curel.contentEditable = false;
              curel.parentElement.children[
                curcellIndex - 1
              ].contentEditable = true;
              curel.parentElement.children[curcellIndex - 1].focus();
            }
          } else if (e.keyCode == 39 || e.keyCode == 9) {
            //键盘按钮右键
            e.preventDefault();
            if (curcellIndex + 1 == curel.parentElement.children.length) {
              if (curRowIndex + 1 == curtbody.length) {
                curel.contentEditable = false;
                curtbody[0].children[1].contentEditable = true;
                curtbody[0].children[1].focus();
              } else {
                curel.contentEditable = false;
                curtbody[curRowIndex + 1].children[1].contentEditable = true;
                curtbody[curRowIndex + 1].children[1].focus();
              }
            } else {
              curel.contentEditable = false;
              curel.parentElement.children[
                curcellIndex + 1
              ].contentEditable = true;
              curel.parentElement.children[curcellIndex + 1].focus();
            }
          } else if (e.keyCode == 40 || e.keyCode == 13) {
            //向下按钮按键
            e.preventDefault();
            if (curRowIndex + 1 == curtbody.length) {
              curel.contentEditable = false;
              curtbody[0].children[curcellIndex].contentEditable = true;
              curtbody[0].children[curcellIndex].focus();
            } else {
              curel.contentEditable = false;
              curtbody[curRowIndex + 1].children[
                curcellIndex
              ].contentEditable = true;
              curtbody[curRowIndex + 1].children[curcellIndex].focus();
            }
          }
        };
      }