vue+element-ui 实现table单元格点击编辑，并且按上下左右键单元格之间切换

Posted 2021-01-02 tohold

celledit(row, column, cell, event){
      console.log(cell,event)
      let oldel =  cell.children[0];
      let oldVal = cell.children[0].innerhtml
      console.log(oldVal)
      if (column.label != "日期") {
            //event.target.innerHTML = "";
      var cellInput = document.createElement("input");
//let cellInput = ‘<input type="text" class="edit" value="‘+oldVal+‘" style="width:100%;height:100%;border:none;background-color:transparent;outline:none;padding-left:10px">‘
            cellInput.setAttribute("type", "text");
            cellInput.setAttribute("class", "edit");
            cellInput.value = oldVal;
            cellInput.style.width = "100%";
            cellInput.style.border = "none";
            cellInput.style.backgroundColor = "transparent";
            cellInput.style.paddingLeft = "10px";
            cellInput.style.outline="none";
            console.log("cellInput",cellInput)
            oldel.style.display =" none"
            //cell.innerHTML = cellInput ;
            cell.appendChild(cellInput);
            $(".edit").focus()
              console.log(‘oldel‘,cell.innerHTML)
            cellInput.onblur = function() {
              oldel.innerHTML = cellInput.value
              oldel.style.display ="block";
              
              cell.removeChild(cellInput);
              //event.target.innerHTML = cellInput.value;
            };
      }
      //let dom = cell.children[0]
      //$(".edit").remove()
      //dom.innerHTML = input;
         //$(".edit").focus()
        // dom.contentEditable = true;
        // console.log(cell.previousSibling.children[0])
        // if(dom.contentEditable = true){
        //   dom.onkeyup = function(e){
        //     console.log(e)
        //     if( e.keyCode == 38){
        //       console.log("上件s")
        //     }else if(e.keyCode == 37){    //键盘按钮左键
        //       console.log("zuo")
        //       dom.contentEditable = false
        //       cell.previousSibling.children[0].contentEditable = true; 
        //     }else if(e.keyCode == 39){    //右按钮
        //       console.log("you")
        //       dom.contentEditable = false
        //       cell.nextSibling.children[0].contentEditable = true;
        //     }else if(e.keyCode == 40){
        //       console.log("xia")
        //     }
        //   }
        // }
        // dom.onblur = function(){
        //   console.log(33343)
        // }
        // if(dom.contentEditable == "false"){
        //   console.log(23232)
        // }
        // $(".edit").blur(function(){
        //   if( $(".edit").val() != oldVal)
        //   console.log("this",$(this))  
        //   console.log("input",$(this).parent())  

        //   //console.log(‘this‘,$(this).parent().val($(".edit").val()))
        //     $(this).parent()[0].innerText = $(".edit").val();
        //   $(this).remove()
        // })
    },