ag-grid-vue3添加行

ag-grid-vue3是一个强大的Vue.js表格组件，用于展示和处理大量数据。要向ag-grid-vue3添加行，可以通过调用gridApi中的相应方法实现。下面是添加行的步骤：

1. 获取gridApi对象

在ag-grid-vue3中，可以通过以下代码获取gridApi对象：

<AgGridVue
    ...
    @grid-ready="onGridReady"
    ...
/>
...
methods: {
    onGridReady(params) {
        this.gridApi = params.api;
        ...
    }
}

在onGridReady函数中，将gridApi对象保存在Vue实例的变量中以便后续使用。

2. 添加行数据

要添加行数据，可以通过调用gridApi对象的applyTransaction方法实现。该方法需要传入一个Transaction对象作为参数，Transaction对象包含要添加的行数据。

addRow() {
    const newRowData = { id: 4, name: 'John Doe', age: 30, gender: 'Male' };
    const addTransaction = {
        add: [newRowData],
    };
    this.gridApi.applyTransaction(addTransaction);
}

在上述代码中，首先定义一个新行数据newRowData，然后创建一个Transaction对象addTransaction，其中包含要添加的行数据。最后，调用gridApi的applyTransaction方法并将addTransaction作为参数传入即可。

3. 更新视图

添加行数据后，需要更新视图以显示新的行数据。可以通过调用gridApi对象的refreshCells方法实现：

addRow() {
    ...
    this.gridApi.applyTransaction(addTransaction);
    this.gridApi.refreshCells();
}

在上述代码中，添加行数据后调用gridApi的refreshCells方法即可更新视图。