选择单元格时的 ag-grid 焦点复选框

【问题标题】：ag-grid focus checkbox when cell is selected选择单元格时的 ag-grid 焦点复选框
【发布时间】：2023-01-26 11:01:24
【问题描述】：

我有一个带有复选框的列。我希望用户能够按下向下箭头，转到下一个复选框，然后按空格键切换复选框。

我不想选择行，我只想编辑当前行上的复选框。

我能够创建自定义单元格渲染器，但我不知道如何判断“选择此单元格时，选择其中的复选框”。

这是该列当前的样子：

【问题讨论】：

标签： vue.js focus ag-grid

【解决方案1】：

您可以像这样从AgGridVue 收听cellKeyDown 事件：

    <AgGridVue
      style="height: 100vh; width: 100%"
      class="ag-theme-alpine"
      :columnDefs="columnDefs"
      :rowData="rowData"
      @cellKeyDown="onKeyDownHandler($event)" 
    />

并添加方法/功能：

    function onKeyDownHandler(params) {
      const { colId } = params.column;
      if (colId === 'isValid' && params.event.code === 'Space') {
        params.node.setDataValue(colId, !params.value);
      }
    }

这将检查是否在您的 isValid 列中按下了键，并且它是 Space 键，如果是，它会切换单元格值。

这是一个快速沙箱/stackblitz：https://stackblitz.com/edit/vue-khblqw?file=src/App.vue

【讨论】：