码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-08-30 11:41:51      阅读:3589      评论:0      收藏:0      [点我收藏+]

标签:bsp   input   tee   ==   vue   editable   column   键盘   doc   

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()
        // })
    },

 

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

标签:bsp   input   tee   ==   vue   editable   column   键盘   doc   

原文地址:https://www.cnblogs.com/Tohold/p/9559092.html

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!