• 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();
                }
              }
            };
          }
  • 相关阅读:
    TCP 基础知识
    Spring Boot 实战 —— 日志框架 Log4j2 SLF4J 的学习
    MySQL 实战笔记
    Java 基础
    RPM 包的构建
    RPM 包的构建
    9. 桶排序
    8. 基数排序
    7. 计数排序
    6. 快速排序
  • 原文地址:https://www.cnblogs.com/Tohold/p/9559092.html
Copyright © 2020-2023  润新知