0

我有一个闪电：数据表，我需要在用户滚动时加载数据。我发现当用户单击表格行而不是用户在表格上滚动时会触发 onloadmore 事件。

更有什者，一旦触发了onloadmore，它就会一直调用，直到加载数据库中的所有记录。

有人可以帮我理解为什么要这样做和解决方法吗？任何帮助将不胜感激。

要检查如何调用 loadMoreData 函数，请打开检查器并在单击一行后检查控制台。

这是一个例子：

测试数据表.cmp

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="ContactController">
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    
    <aura:attribute name="rowsToLoad" type="Integer" default="10"/>
    <aura:attribute name="enableInfiniteLoading" type="Boolean" default="false"/>
    <aura:attribute name="loadMoreOffset" type="Integer" default="5"/>
    <aura:attribute name="loadMoreStatus" type="String" default=""/>
    
    <!-- handlers-->
    <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
    
    <lightning:card title="testDataTableCard">
        <lightning:datatable
          keyField="Id"
          data="{! v.data }"
          columns="{! v.columns }"
          enableInfiniteLoading="{! v.enableInfiniteLoading }"
          onloadmore="{! c.loadMoreData }"/>
    </lightning:card>
</aura:component>

testDataTableController.js

({
	doInit : function(component, event, helper) {
		component.set('v.columns', [
            {label: 'Id', fieldName: 'Id', type: 'text'},
        	{label: 'LastName', fieldName: 'LastName', type: 'text'}
        ]);
        
        helper.loadContacts(component, event, helper);
	},
    
    loadMoreData: function(component, event, helper) {
        console.log('loadMoreData called');
    }
})

testDataTableHelper.js

({
  loadContacts : function(component, event, helper) {
    var action = component.get("c.getContacts");
    action.setStorable();
    action.setCallback(this,function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var records = response.getReturnValue();
            component.set("v.data", records);
            component.set("v.enableInfiniteLoading", true);
        } else {
            console.log('ERROR');
        }
    });
    $A.enqueueAction(action);
  }
})

ContactController.class

public class ContactController {
  @AuraEnabled
  public static List<Contact> getContacts() {
      return[Select Id, LastName From Contact Limit 10];
  }
}

Lightning 组件库：lightning:datatable 无限加载

4

2 回答 2

0

为了修复无穷大 onloadmore，您应该将数据表包装到具有固定绝对高度的 div 中。

于 2019-08-06T12:25:16.913 回答
0

当我只有几条记录要显示时，我的 DataTable 也遇到了类似的问题，也许这对你也有帮助。

当我设置 DataTable 元素的 isLoading 属性时，它会在 DataTable 创建的所有 div 中的某处显示微调器。但是微调器的高度大于内部计算是否触发loadMore回调函数中使用的数据表元素的高度，所以它一次又一次地触发它......

它为我停止无限循环的方式是始终将 isLoading 保持为 false。您可以将自己的微调器实现为整个表的覆盖，这不会启动高度重新计算。

同样，此解决方案特定于表格仅显示几个元素的情况，因此微调器图像大于表格。如果您使用模态窗口或其他容器，请尝试按照 Andrii 的建议显式设置高度：

<div style="height:500px">
    <lightning:datatable
        data="{!v.data}"
        ...
        />
</div>

您可以在此处找到支持的属性列表

于 2020-04-08T17:41:03.033 回答