如果单元格不可见，则以编程方式打开行的编辑模式. Ag 网格，Vue.js

如果单元格不可见，如何以编程方式打开行的编辑模式？

在我的例子中，由于有大量列，单元格不可见.Here是一个可复制的示例:

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import 'ag-grid-enterprise';
import { AgGridVue } from 'ag-grid-vue';
import Vue from 'vue';

const VueExample = {
  template: `
        <div style="height: 100%">
            <div class="example-wrapper">
                <div style="margin-bottom: 5px;">
                    <button style="font-size: 12px" v-on:click="onBtStartEditing()">Start Editing Line 2</button>
                    <button style="font-size: 12px" v-on:click="onBtStopEditing()">Stop Editing</button>
                </div>
                <ag-grid-vue
                
                style="width: 100%; height: 100%;"
                class="ag-theme-alpine"
                :columnDefs="columnDefs"
                @grid-ready="onGridReady"
                :defaultColDef="defaultColDef"
                :editType="editType"
                :rowData="rowData"
                @cell-value-changed="onCellValueChanged"
                @row-value-changed="onRowValueChanged"></ag-grid-vue>
            </div>
        </div>
    `,
  components: {
    'ag-grid-vue': AgGridVue,
  },
  data: function () {
    return {
      columnDefs: [
        {
          field: 'make',
          cellEditor: 'agSelectCellEditor',
          cellEditorParams: {
            values: ['Porsche', 'Toyota', 'Ford', 'AAA', 'BBB', 'CCC'],
          },
        },
        { field: 'model' },
        { field: 'field4', headerName: 'Read Only', editable: true },
        { field: 'price', cellEditor: NumericCellEditor },
        {
          headerName: 'Suppress Navigable',
          field: 'field5',
          suppressNavigable: true,
          minWidth: 200,
        },
        { headerName: 'Read Only', field: 'field6', editable: true },
      ],
      gridApi: null,
      columnApi: null,
      defaultColDef: {
        flex: 1,
        editable: true,
      },
      editType: null,
      rowData: null,
    };
  },
  created() {
    this.editType = 'fullRow';
    this.rowData = getRowData();
    for(let i = 0; i < 1000; ++i) {
      this.columnDefs.push({ headerName: 'Read Only', field: 'field6', editable: true });
    }
  },
  methods: {
    onCellValueChanged(event) {
      console.log(
        'onCellValueChanged: ' + event.colDef.field + ' = ' + event.newValue
      );
    },
    onRowValueChanged(event) {
      var data = event.data;
      console.log(
        'onRowValueChanged: (' +
          data.make +
          ', ' +
          data.model +
          ', ' +
          data.price +
          ', ' +
          data.field5 +
          ')'
      );
    },
    onBtStopEditing() {
      this.gridApi.stopEditing();
    },
    onBtStartEditing() {
      this.gridApi.setFocusedCell(1, 'make');
      this.gridApi.startEditingCell({
        rowIndex: 1,
        colKey: 'make',
      });
    },
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
    },
  },
};

window.getRowData = function getRowData() {
  var rowData = [];
  for (var i = 0; i < 10; i++) {
    rowData.push({
      make: 'Toyota',
      model: 'Celica',
      price: 35000 + i * 1000,
      field4: 'Sample XX',
      field5: 'Sample 22',
      field6: 'Sample 23',
    });
    rowData.push({
      make: 'Ford',
      model: 'Mondeo',
      price: 32000 + i * 1000,
      field4: 'Sample YY',
      field5: 'Sample 24',
      field6: 'Sample 25',
    });
    rowData.push({
      make: 'Porsche',
      model: 'Boxster',
      price: 72000 + i * 1000,
      field4: 'Sample ZZ',
      field5: 'Sample 26',
      field6: 'Sample 27',
    });
  }
  return rowData;
};

new Vue({
  el: '#app',
  components: {
    'my-component': VueExample,
  },
});

应用程序打开后，只需滚动到表的最右边.然后单击Start Editing Line 2按钮.结果是没有任何行被传输到编辑模式.这是因为make列已从DOM中删除.

现在，刷新页面并单击Start Editing Line 2按钮，不要在任何地方滚动.结果是第二行进入编辑模式.

那么，如果不是所有单元格都可见，如何将行转换为编辑模式？一、 e.在前一种情况下，我希望Start Editing Line 2按钮继续工作.

如果单元格不可见，我宁愿不聚焦任何单元格，仍然在编辑模式下传输行.