Vue.js 无法在Vue2中实现aggrid无限滚动

我正在尝试将无限滚动添加到ag grid vue。但没有做到这一点

我有来自api的数据，对于每一个卷轴，我需要从服务器获得50多个数据，并尝试重新加载网格。普朗克：

附上所用代码：

请帮助我将上面示例中的无限卷轴和api包含在富网格中。 ag grid vue示例/src/rich grid example/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);
});
});

var columnDefs=[
{头部名称：“ID”，宽度：50，
valueGetter:'node.id'，
cellRenderer:“加载渲染器”
},
{标题名称：“运动员”，字段：“运动员”，宽度：150}，
{标题名称：“年龄”，字段：“年龄”，宽度：90}，
{标题名称：“国家”，字段：“国家”，宽度：120}，
{标题名称：“年”，字段：“年”，宽度：90}，
{标题名称：“日期”，字段：“日期”，宽度：110}，
{标题名称：“运动”，字段：“运动”，宽度：110}，
{标题名称：“黄金”，字段：“黄金”，宽度：100}，
{标题名称：“银”，字段：“银”，宽度：100}，
{标题名称：“青铜”，字段：“青铜”，宽度：100}，
{标题名称：“总计”，字段：“总计”，宽度：100}
];
变量gridOptions={
组成部分：{
加载渲染器：函数（参数）{
如果（参数值！==未定义）{
返回参数值；
}否则{
返回“”
}
}
},
enableColResize:true，
行缓冲区：0，
是的，
行选择：“多个”，
行取消选择：true，
columnDefs:columnDefs，
rowModelType:'无限'，
分页PageSize:100，
cacheOverflowSize:2，
MaxConcurrentDataSources任务：2，
无限初始行数：1，
maxBlocksInCache:2
};
document.addEventListener（'DOMContentLoaded'，function（）{
var gridDiv=document.querySelector（“#myGrid”）；
新的agGrid.Grid（gridDiv，gridOptions）；
agGrid.simpleHttpRequest（{url:'https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinners.json'}）。然后（函数（数据）{
变量数据源={
rowCount:null，//表现为无限滚动
getRows:函数（参数）{
console.log（'请求'+params.startRow+'到'+params.endRow'）；
setTimeout（函数（）{
var rowsThisPage=data.slice（params.startRow、params.endRow）；
var lastRow=-1；
if（data.length）您到底遇到了什么问题？您是否有一个简单的内存模型工作？我希望在Vue 2.0中有类似的功能，但每50条记录的数据都来自服务器，即当scroll到达底部时。问题是当scroll到达底部时未调用GetRows函数。如何启用该功能？