【前端小技能】ElementUI表格双击可编辑--开箱即用

记录在项目开发过程中遇到的小问题，积累开发经验，欢迎大家一起留言探讨

在工作中，碰到了双击可修改表格内容的需求，项目采用的是ElementUI前端框架

1、在表格中声明双击事件

<el-table
   ......
   @cell-dblclick="tableDbEdit"
   ......
</el-table>   

2、编写方法实现功能

tableDbEdit(row, column, cell, event) {
      console.log(row, column, cell, event);
      // 定义我们要排除的编辑的列，
      let noEditColumns = [];
      // 全表格可编辑的话直接注释下一行即可
      noEditColumns = ["name", "sid", "priority", "classtypeChinese", "操作"];
      /**
       * 注意对应关系
       * 1、column.property--对应的是我们的数据列名
       * 2、column.label ---对应的是标题的中文名称
       * */ 
      if (noEditColumns.indexOf(column.property) != -1) {
        return;
      }
      // 记录要编辑的表格，原本的值
      let msg = row[column.property];
      event.target.innerHTML = "";
      // 双击添加input框
      let cellInput = document.createElement("input");
      //设置input框样式及类型
      cellInput.value = msg;
      cellInput.setAttribute("type", "input");
      cellInput.style.width = "80%";
      cellInput.style.height = "30px";
      cellInput.style.paddingLeft = "10px";
      cellInput.style.border = "1px solid #288EFE";
      cellInput.style.borderRadius = "3px";
      cell.appendChild(cellInput);
      // --注意此处需要将焦点设置给cellInput，否则onBlur不好使
      cellInput.focus();
      //为鼠标添加失去焦点事件
      cellInput.onblur = async () => {
        // 判断输入是否为空，为空则删除input
        if (cellInput.value == "") {
          cell.removeChild(cellInput);
          event.target.innerHTML = msg;
        } else {
          cell.removeChild(cellInput);
          // 修改值
          event.target.innerHTML = cellInput.value;
          // 自己的请求在这里书写，下边只是示例
          let form = {
            sid: column.property === 'sid' ? cellInput.value : row.sid, 
            tag: column.property === 'tag' ? cellInput.value : row.tag,
            msg: column.property === 'msg' ? cellInput.value : row.msg,
            chineseName: column.property === 'chineseName' ? cellInput.value : row.chineseName
          }
          const {data} = await RuleUpdate(form)
          console.log(data)
        }
      };
    },

3、双击看效果

除去我们定义的排除编辑的列，其余列都可以进行进行双击修改的操作。