the effect of table editing is achieved through the contentEditable of H5, but there is no response to the addition of arrow key events?

< el-table

:data="tableData"
border
@cell-click="celledit"
style="width: 90%">
<el-table-column
  prop="date"
  label=""
  width="180">
</el-table-column>
<el-table-column
  prop="name"
  label=""
  width="180">
</el-table-column>
<el-table-column
  prop="address"
  label="">
</el-table-column>

< / el-table >

< script >
export default {

data() {
  return {
    tableData: [{
      date: "2016-05-02",
      name: "",
      address: " 1518 "
    }, {
      date: "2016-05-04",
      name: "",
      address: " 1517 "
    }, {
      date: "2016-05-01",
      name: "",
      address: " 1519 "
    }, {
      date: "2016-05-03",
      name: "",
      address: " 1516 "
    }]
  }
},
methods: {
 celledit(row, column, cell, event) {
  cell.contentEditable = true;
  cell.focus()
   let self = this;
   boolen = true;
  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();
        }
      }
    };
  }
},
 keyx(e){
   let self = this;
   boolen =true
  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();
        }
      }
    };
  }
}

}
}
< / script >