vue element-table 为什么单元表格不能用方向键选择?

Question

通过H5的contentEditable实现了表格编辑的效果,可是添加方向键事件,操作起来没有反应?

<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>

Answer 1

解决了,在if (boolen == true)上面添加"var boolen = true "