为什么从 rowData 引用值中删除一行后，ag-grid 并不总是更新？

Question

我发现在使用 vue 的 ag-grid 社区版中，如果我从 rowData 数组中删除一行，则删除的行会立即从网格中删除。我可以立即看到更新。但是从 rowData 中删除的任何后续行都没有效果，并且不会从网格中删除。

有没有办法强制网格拾取这些删除的行？我尝试了refreshCells和redrawRows但没有运气。

我在这里有一个此行为的演示：

https://plnkr.co/edit/r1o2N6DzOF1t8BPB?open=main.js

import { ModuleRegistry } from '@ag-grid-community/core';
import '@ag-grid-community/styles/ag-grid.css';
import '@ag-grid-community/styles/ag-theme-alpine.css';
import { AgGridVue } from '@ag-grid-community/vue3';
import { createApp, onBeforeMount, ref } from 'vue';

// Register the required feature modules with the Grid
ModuleRegistry.registerModules([ClientSideRowModelModule]);

const VueExample = {
  template: `
        <div style="height: 100%">
       
            <div style="height: 100%; width: 100%; display: flex; flex-direction: column;">
             {{ deleteUpdateInfo }}
                <div style="margin-bottom: 5px; min-height: 30px;">
                    <button v-on:click="deleteRow(2)">Delete row 3 </button>
                </div>
                <div style="flex: 1 1 0px;">
                    <ag-grid-vue
                
                style="width: 100%; height: 100%;"
                class="ag-theme-alpine"
                :columnDefs="columnDefs"
                @grid-ready="onGridReady"
                :rowData="rowData"
                :rowSelection="rowSelection"
                :animateRows="true"></ag-grid-vue>
                </div>
            </div>
        </div>
    `,
  components: {
    'ag-grid-vue': AgGridVue,
  },
  setup(props) {
    const columnDefs = ref([
      { field: 'make' },
      { field: 'model' },
      { field: 'price' },
    ]);
    const gridApi = ref();
    const gridColumnApi = ref();

    const rowData = ref(null);
    const rowSelection = ref(null);
    const deleteUpdateInfo = ref('')
    onBeforeMount(() => {
      rowSelection.value = 'single';
    });

    const deleteRow = (rIndex) => {
      deleteUpdateInfo.value = `deleting row ${rIndex +1} containing ${rowData.value[rIndex].make} from data. Current row size is ${rowData.value.length}... `
      rowData.value.splice(rIndex,1)
      deleteUpdateInfo.value = `${deleteUpdateInfo.value} row deleted. Now row size is ${rowData.value.length}`
      console.log(deleteUpdateInfo.value)
    }
    const onRowDataA = () => {
      gridApi.value.setRowData(rowDataA);
    };
    const onRowDataB = () => {
      gridApi.value.setRowData(rowDataB);
    };
    const onGridReady = (params) => {
      gridApi.value = params.api;
      gridColumnApi.value = params.columnApi;
      // specify the data
    rowData.value = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Porsche', model: 'Boxster', price: 72000 },
      { make: 'Aston Martin', model: 'DBX', price: 190000 },

      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxster', price: 72000 },
      { make: 'BMW', model: 'M50', price: 60000 },
      { make: 'Aston Martin', model: 'DBX', price: 190000 },
    ];
    };

    return {
      columnDefs,
      gridApi,
      gridColumnApi,
      rowData,
      rowSelection,
      onGridReady,
      onRowDataA,
      onRowDataB,
      deleteRow,
      deleteUpdateInfo
    };
  },
};



createApp(VueExample).mount('#app');

Answer 1

这适用于问题中包含的示例代码：

gridApi.value.setRowData(rowData.value) 

在我的代码库中，此修复生成了错误。

ag-grid-community.auto.esm.js:36619 未捕获错误：AG 网格：当网格位于绘图行中间时，无法让网格绘制行。

但这有效：

setTimeout(function() { gridApi.setRowData(rowData.value); }, 0)