无法在Vue2中实现aggrid无限滚动

Question

我正在尝试向ag-grid-vue添加无限滚动。但未能这样做。

我有来自api的数据和每个滚动，我需要从服务器获得50多个并尝试重新加载网格。 Plunker： https://plnkr.co/edit/t8m2KgmuEcGB5pxBuMdA?p=preview

附加使用的代码： https://github.com/ag-grid/ag-grid-vue-example

请帮助我在上面的示例中在富网格上包含带有api的无限滚动。 AG-网格VUE-示例/ SRC /富网格示例/ RichGridExample.vue

var columnDefs = [
{headerName: "ID", width: 50,
     valueGetter: 'node.id',
    cellRenderer: 'loadingRenderer'
},
{headerName: "Athlete", field: "athlete", width: 150},
{headerName: "Age", field: "age", width: 90},
{headerName: "Country", field: "country", width: 120},
{headerName: "Year", field: "year", width: 90},
{headerName: "Date", field: "date", width: 110},
{headerName: "Sport", field: "sport", width: 110},
{headerName: "Gold", field: "gold", width: 100},
{headerName: "Silver", field: "silver", width: 100},
{headerName: "Bronze", field: "bronze", width: 100},
{headerName: "Total", field: "total", width: 100}
];

var gridOptions = {
components:{
    loadingRenderer: function(params) {
        if (params.value !== undefined) {
            return params.value;
        } else {
            return '<img src="../images/loading.gif">'
        }
    }

},
enableColResize: true,
rowBuffer: 0,
debug: true,
rowSelection: 'multiple',
rowDeselection: true,
columnDefs: columnDefs,
rowModelType: 'infinite',
paginationPageSize: 100,
cacheOverflowSize: 2,
maxConcurrentDatasourceRequests: 2,
infiniteInitialRowCount: 1,
maxBlocksInCache: 2
};

document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);

agGrid.simpleHttpRequest({url: 'https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinners.json'}).then(function(data) {
    var dataSource = {
        rowCount: null, // behave as infinite scroll
        getRows: function (params) {
            console.log('asking for ' + params.startRow + ' to ' + params.endRow);
            setTimeout( function() {
                var rowsThisPage = data.slice(params.startRow, params.endRow);
                var lastRow = -1;
                if (data.length <= params.endRow) {
                    lastRow = data.length;
                }
                params.successCallback(rowsThisPage, lastRow);
            }, 500);
        }
    };

    gridOptions.api.setDatasource(dataSource);
});
});