Vue實現Table內使用keyup移動單元格焦點

官網地址：https://cn.vuejs.org/v2/guide/events.html#按鍵修飾符

一、描述

　　Table內使用鍵盤方向鍵操作單元格內input元素

二、基礎

　　@keyup.ctrl.37  ctrl + ←

　　@keyup.ctrl.38  ctrl + ↑

　　@keyup.ctrl.39  ctrl + →

　　@keyup.ctrl.40  ctrl + ↓

三、實現

<template>
  <div class="sp-container">
    <table class="sp-table"
    @keyup.ctrl.37='LeftMoving'
    @keyup.ctrl.38='TopMoving'
    @keyup.ctrl.39='RightMoving'
    @keyup.ctrl.40='BottomMoving'
    >
      <tr v-for="rows of tableData" :key="rows.key">
        <td class="sp-cell" v-for="cell of rows.row" :key="cell.index">
          <input type="text" class="sp-cell-input" :ref="cell.rf" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "sp-table",
  data() {
    return {
      top: 1, //單元格最小索引
      bottom: 15, //單元格最大索引
      step: 5, //上下移動的步長
      focusIndex: 1, //當前焦點所在的索引
      tableData: [
        //數據源 (文章下方有單獨的數據源代碼塊，數據源結構大致如此)
        {
          row: [
            {
              rf: "InnerInput1",
              index: 1
            },
            {
              rf: "InnerInput2",
              index: 2
            },
            {
              rf: "InnerInput3",
              index: 3
            },
            {
              rf: "InnerInput4",
              index: 4
            },
            {
              rf: "InnerInput5",
              index: 5
            }
          ],
          key: 1
        }
      ]
    };
  },
  mounted() {
    //焦點默認在第一個
    this.$refs["InnerInput1"][0].focus();
  },
  methods: {
    LeftMoving() {
      //向左移動
      //如果向左移動到首個單元格，阻止操作
      if (this.focusIndex == 1) {
        return false;
      }
      //向左移動，當前焦點索引 - 1
      this.focusIndex--;
      //拼接 ref 名稱
      let rf = "InnerInput" + this.focusIndex;
      //設置目標的焦點
      this.$refs[rf][0].focus();
    },
    TopMoving() {
      //向上移動
      //如果移動到首行，阻止操作
      if (this.focusIndex - this.step < this.top) {
        return false;
      }
      //向上移動，當前焦點索引 - 步長
      this.focusIndex -= this.step;
      //拼接 ref 名稱
      let rf = "InnerInput" + this.focusIndex;
      //設置目標焦點
      this.$refs[rf][0].focus();
    },
    RightMoving() {
      //向右移動
      //如果移動到最后一個單元格，阻止操作
      if (this.focusIndex == this.bottom) {
        return false;
      }
      //向右移動，當前焦點索引 + 1
      this.focusIndex++;
      //拼接 ref 名稱
      let rf = "InnerInput" + this.focusIndex;
      //設置目標焦點
      this.$refs[rf][0].focus();
    },
    BottomMoving() {
      //向下移動
      //如果移動到最后一行，阻止操作
      if (this.focusIndex + this.step > this.bottom) {
        return false;
      }
      //向下移動，當前焦點索引 + 步長
      this.focusIndex += this.step;
      //拼接 ref 名稱
      let rf = "InnerInput" + this.focusIndex;
      console.log(this.$refs[rf])
      //設置目標焦點
      this.$refs[rf][0].focus();
    }
  }
};
</script>

 tableData: [
        //數據源
        {
          row: [
            {
              rf: "InnerInput1",
              index: 1
            },
            {
              rf: "InnerInput2",
              index: 2
            },
            {
              rf: "InnerInput3",
              index: 3
            },
            {
              rf: "InnerInput4",
              index: 4
            },
            {
              rf: "InnerInput5",
              index: 5
            }
          ],
          key: 1
        },
        {
          row: [
            {
              rf: "InnerInput6",
              index: 6
            },
            {
              rf: "InnerInput7",
              index: 7
            },
            {
              rf: "InnerInput8",
              index: 8
            },
            {
              rf: "InnerInput9",
              index: 9
            },
            {
              rf: "InnerInput10",
              index: 10
            }
          ],
          key: 2
        },
        {
          row: [
            {
              rf: "InnerInput11",
              index: 11
            },
            {
              rf: "InnerInput12",
              index: 12
            },
            {
              rf: "InnerInput13",
              index: 13
            },
            {
              rf: "InnerInput14",
              index: 14
            },
            {
              rf: "InnerInput15",
              index: 15
            }
          ],
          key: 3
        }
      ]

<style scoped>
.sp-container {
  width: 100%;
  height: 100%;
  margin-top: 120px;
}
.sp-table {
  width: 606px;
  height: 86px;
  margin: 0 auto;
  border-left: 2px solid #000;
  border-top: 2px solid #000;
}
.sp-cell {
  width: 120px;
  height: 40px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  padding: 2px;
  box-sizing: border-box;
}
.sp-cell-input {
  width: 95%;
  height: 100%;
  font-size: 16px;
}
</style>

四、效果

五、注意事項

• 在使用 this.$refs[rf] 時，后面必須加 [0]，因為此時 this.$refs[rf]  不是一個DOM元素，而是一個數組

 

謙良恭卑，信誠實至；生活不易，共勉同求。