ag-grid-vue 中键盘点击回车，跳转到下一行

最新推荐文章于 2023-12-12 16:42:03 发布

cc&

最新推荐文章于 2023-12-12 16:42:03 发布

阅读量387

点赞数

分类专栏： ad-grid 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/grow_/article/details/129662956

版权

ad-grid 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

1.ag-grid-vue中添加 @cell-key-down="fiveOnCellKeyDown"

 <ag-grid-vue
          style="margin-top: 5px; width: 98.5%; height: 260px"
          class="ag-theme-alpine"
          :column-defs="five_columnDefs"
          :row-data="five_rowData"
          :default-col-def="defaultColDef"
          :enable-range-selection="true"
          row-selection="multiple"
          :get-context-menu-items="getContextFiveMenuItems"
          @cell-double-clicked="fiveOnCellClicked"
          @cell-key-down="fiveOnCellKeyDown"
          @grid-ready="five_onGridReady"
        />

2. methods 中添加 fiveOnCellKeyDown

fiveOnCellKeyDown(e) {
      if (e.event) {
        // 键盘输入的值
        var keyPressed = e.event.key
        if (keyPressed === 'Enter') {
          // 当前单元格是内一个
          var currentCell = this.five_gridApi.getFocusedCell()
          //  停止当前单元格的编辑
          this.five_gridApi.stopEditing()
          // 跳转到下一行单元格
          this.five_gridApi.startEditingCell({
            rowIndex: currentCell.rowIndex + 1,
            colKey: currentCell.column.colId
          })
        }
      }
    },