通过我的测试我发现两个两种方法来编辑单元格的内容
第一种点击编辑：
我是给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();}}};}
