为什么从rowData ref中删除一行后,ag-grid并不总是更新?

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

是否有办法强制网格拾取这些被删除的行?我尝试刷新Cells和重绘Rows,但没有成功。

我在这里演示了这种行为:

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');