Vue实现单元表格，并且通过键盘移动高亮

Vue实现单元表格，并且通过键盘移动高亮

题目：
使用vue实现一个高度为10个单元格的表格，类似下图，默认左上角“实际尺寸”的第一个单元格高亮显示（样式不限）
功能要求：

1. 在“实际尺寸”单元格范围内，按下Enter键高亮色块向下移动一格，按下Tab键向右移动一格（越过“规定尺寸”单元格）
2. 考虑边界情况，例如已经移动到了最后一格，再按Enter键或Tab键，同样停留在最后一格

首先建立三个单元格

<!--    通过循环建立三个单元表格-->
    <table class="table" border="1" v-for="(j,col) in 3" :key="col">
      <thead>
      <tr>
        <th>规定尺寸</th>
        <th>实际尺寸</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(i,row) in 8" :key="row">
        <td>12</td>
<!--        动态绑定class,参数tdRow tdCol默认为1,默认左上角“实际尺寸”的第一个单元格高亮显示-->
        <td :class="(i===tdRow&&j===tdCol)?'highLight':''">{{i+8*(j-1)-1}}</td>
      </tr>
      </tbody>
    </table>

设置样式

.table {
    display: inline-block;
    margin: 10px;
    cellpadding:0;
    cellspacing:0;
    border-collapse: collapse;
  }

在设置高亮时最开始确实是想通过动态绑定class实现，但是没有想到可以使用通过设置data参数来操作。在网上查了一些资料，了解到了ref的用法 本来是想通过ref获取到三个单元格中所有的td，将对象转换成数组 但是最后转换出来的结果不知道为什么一直为空。
之后通过设置tdRow和tdCol数值为1,默认左上角“实际尺寸”的第一个单元格高亮显示。

绑定键盘事件这里看了很多资料，因为之前js没学好。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
关于键盘事件绑定我是在网上找的代码，这里没有使用箭头函数，所以最开始直接用this.获取不到参数的值

关于Vue全局绑定键盘事件参考文章

mounted(){
      // 如果不用箭头函数的话，需要在外面把this赋给一个值然后在事件中使用
      let self = this
      document.onkeydown = function(e) {
        let ev = document.all ? window.event : e
        // 设置按下enter键
        if (ev.keyCode === 13) {
          console.log(self.tdRow);
          if(self.tdRow<8){
            self.tdRow++
          }
          else{
            self.tdRow=8
          }
        }
        // 设置按下tab键
        if (ev.keyCode === 9) {
          console.log(self.tdRow);
          if(self.tdCol<3){
            self.tdCol++
          }
          else{
            self.tdCol=3
          }
        }
      }
    },

然后基本上就实现了