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