iview admin vue监听键盘回车事件--Enter

1 需求

列表搜索键按回车键直接搜索

iview admin vue监听键盘回车事件--Enter_第1张图片

2 实现

在表格组件增加方法

    enterKey (event) {
      const code = event.keyCode
        ? event.keyCode
        : event.which
          ? event.which
          : event.charCode
      // eslint-disable-next-line eqeqeq
      if (code == 13) {
        this.handleSearch()
      }
    },
    enterKeyupDestroyed () {
      document.removeEventListener('keyup', this.enterKey)
    },
    enterKeyup () {
      document.addEventListener('keyup', this.enterKey)
    }

加载绑定事件

  destroyed () {
    // 销毁enter事件
    this.enterKeyupDestroyed()
  },
  mounted () {
    // 绑定enter事件
    this.enterKeyup()
    this.handleColumns(this.columns)
    this.setDefaultSearchKey()
    this.handleTableData()
  }

 

你可能感兴趣的:(前端)