0

我在声明如下的 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 文档建议组件应对更改做出反应。任何想法我做错了什么？

4

1 回答 1

0

Ah-ha. Finally figured it out, posting here in case it helps anyone else.

It looks like my problem was binding both gridOptions and rowData at the same time. Everything was working fine except for the the refresh when rowData was changed. I'm assuming this is because the grid options had its own rowData property and the ag-grid wrapper was using the data from one copy and detecting changes on the other (or something like that).

I replaced the gridOptions binding with a columnDefs binding (in this case the only options I needed to set) and everything started working exactly as it should.

于 2021-01-18T23:25:47.857 回答