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();
            }
          }
        };
      }