aivfo-oa-web/src/views/mixins/directionKey.js

export default {
  data() {
    return {}
  },
  methods: {
    handleKeyDown(event, scope, type) {
      // ↑
      if (event.keyCode === 38) {
        if (type === 'select') {
          return;
        }
        if (scope.$index > 0) {
          this.changeFocus(scope.$index - 1, scope.column.property);
        }
      }
      // ↓
      if (event.keyCode === 40) {
        if (type === 'select') {
          return;
        }
        if (scope.$index < this.addList.length) {
          this.changeFocus(scope.$index + 1, scope.column.property);
        }
      }
      // ->
      if (event.keyCode === 39) {
        if (type === 'select') {
          let refName = 'r' + scope.$index + scope.column.property
          this.$refs[refName].blur();
        }
        let y = this.labelArr.indexOf(scope.column.property)

        if (y > -1) {
          this.changeFocus(scope.$index, this.labelArr[y + 1]);
        }
      }
      // <-
      if (event.keyCode === 37) {
        if (type === 'select') {
          let refName = 'r' + scope.$index + scope.column.property
          this.$refs[refName].blur();
        }
        let y = this.labelArr.indexOf(scope.column.property)
        if (y < this.labelArr.length) {
          this.changeFocus(scope.$index, this.labelArr[y - 1]);
        }
      }
    },

    changeFocus(row, columnProperty) {
      let refName = 'r' + row + columnProperty
      this.$nextTick(() => {
        let ref = this.$refs[refName];
        if (ref) ref.focus();
      });
    },

  }
}