element-ui 表格可编辑

element ui 表格实现可编辑
原文链接：https://blog.csdn.net/qq_41579104/article/details/107387524

    tableDbEdit(row, column, cell, event) {
          console.log(row, column, cell, event);
          console.log(column);
          
          if (row.scq.flag != 0 &&column.property=="scq.dz") {//哪些字段不可编辑，可以在if里面做限制，可编辑的字段往下执行
            event.target.innerHTML = "";
            //双击添加一个input框
            let cellInput = document.createElement("input");
            cellInput.value = row.scq.dz;
            //设置input框的类型，宽，padding，边框，圆角等都可以自己设置
            cellInput.setAttribute("type", "text");
            cellInput.style.width = "80%";
            cellInput.style.padding = "0px"
            cellInput.style.border = "1px solid #288EFE";
            cellInput.style.borderRadius = "3px";
            cellInput.style.background = "transparent";
            cell.appendChild(cellInput);
            cellInput.focus()
            //当鼠标失去焦点时，判断输入是否为空，为空的话可以删除input
            cellInput.onblur = function() {
              if(cellInput.value==""){
                // message_w("字段名不能为空")
                cellInput.value = "字段名不能为空"
                cellInput.style.color = "#FD1B1E"
                console.log("字段不能为空");
                cellInput.style.border = "1px solid #FD1B1E";
              }else{
                cell.removeChild(cellInput);
                event.target.innerHTML=`<span class='el-tag el-tag--success el-tag--light'  disable-transitions>外部</span>`
                event.target.innerHTML += cellInput.value;
                // 做请求改数据
              }
            };
        }
    },