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