Question

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

甚至更多，一旦onloadmore触发，它就会继续调用直到将所有记录加载到数据库中为止。

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

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

这里是一个示例：

testDataTable.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:datatable infinite loading

Answer 1

要修复inloadmore无限，您应该将数据表包装到具有固定绝对高度的div中。

Answer 2

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

当我设置DataTable元素的isLoading属性时，它将显示微调器在DataTable创建的所有div中的某个位置。但是微调器的高度大于内部计算中是否要触发loadMore回调函数的datatable元素的高度，因此它会一次又一次地将其触发...

对我来说，停止无限循环的方法是始终将isLoading保持为false。您可以将自己的微调器实现为整个表格的叠加层，而不会启动高度重新计算。

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

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

您可以找到受支持的属性列表here

Lightning：在单击事件上触发而不是滚动触发数据表InfiniteLoading

2 个答案: