为啥没有使用 vuejs 将新行添加到 ag-grid？

Posted 2023-03-28

【中文标题】为啥没有使用 vuejs 将新行添加到 ag-grid？

【英文标题】：Why are new rows not being added to ag-grid using vuejs?为什么没有使用 vuejs 将新行添加到 ag-grid？

【发布时间】：2020-12-10 18:12:31

【问题描述】：

我在一个 vue.js 应用程序中有一个 ag-grid 组件，声明如下：

<ag-grid-vue :enable-sorting="false"
                                 :enable-filtering="false"
                                 :suppressDragLeaveHidesColumns="true"
                                 :rowData="category.policyDocuments"
                                 :gridOptions="policyGridOptions"
                                 @cellValueChanged="savePolicyRow"
                                 @grid-ready="onPolicyGridReady($event, category)"
                                 class="w-100"
                                 style="height: 200px">
</ag-grid-vue>

绑定到这个打字稿视图模型：

export class PolicyListViewModel 
    status: PolicyDashboardStatus;

    policyLists: DocumentWalletPolicyDocumentList[] = [];

    gridApi: GridApi | null = null;

    policyDocuments: DocumentWalletDocumentViewModel[] = [];

    constructor(status: PolicyDashboardStatus) 
        this.status = status;
    

    get shouldShow(): boolean 
        return this.policyDocuments.length > 0;
    

    updateDocuments(): void 
        this.policyDocuments = this.policyLists
            .map(list => list.policyDocuments)
            .reduce((a, b) => a.concat(b), []);
    

当我的页面首次显示时，我得到了正确的数据。当我用新数据调用updateDocuments 时，网格不会更新。我已经在 vue devtools 中验证了 rowData 道具正在更新。 ag-grid 文档建议组件应对更改做出反应。任何想法我做错了什么？

【问题讨论】：

使用 ag 网格，您可以使用 transactions 更新行数据。您不只是在上面的代码中直接设置它。

感谢@DigitalDrifter 的建议，但在这种情况下，我不会对数据客户端进行更改，而是从服务器刷新。文档说 “更新网格内数据的最简单方法是用一组新数据替换您提供的数据。这是通过更新 rowData 绑定属性（如果使用框架）或调用 api 来完成的.setRowData(newData)."，参见：link。

我之前的评论是您作为解决方案提供的链接中的mentioned。

【参考方案1】：

啊哈。终于想通了，发在这里以防万一它帮助其他人。

看来我的问题是同时绑定gridOptions 和rowData。当rowData 更改时，一切都工作正常除了。我假设这是因为网格选项有自己的 rowData 属性，而 ag-grid 包装器正在使用来自一个副本的数据并检测另一个副本的更改（或类似的东西）。

我用columnDefs 绑定替换了gridOptions 绑定（在这种情况下，我需要设置的唯一选项），一切都开始正常工作了。