Bootstrap Blazor 開(kāi)源UI庫(kù)介紹-Table 虛擬滾動(dòng)行

　　今天我們來(lái)介紹一下 Bootstrap Blazor 中 Table 組件的虛擬滾動(dòng)行，什么是虛擬滾動(dòng)呢，我查到的解釋是：只渲染可視區(qū)域的列表項(xiàng)，非可見(jiàn)區(qū)域的完全不渲染，在滾動(dòng)條滾動(dòng)時(shí)動(dòng)態(tài)更新列表項(xiàng)。

　　然后很明顯，在實(shí)際應(yīng)用中不可能實(shí)現(xiàn)“非可見(jiàn)區(qū)域的完全不渲染”，這樣的體驗(yàn)效果太差了，下拉直接空白，所以一般會(huì)渲染3屏或者是3頁(yè)數(shù)據(jù)，分別是當(dāng)前頁(yè)、上一頁(yè)、下一頁(yè)，當(dāng)用戶(hù)滾動(dòng)到下一頁(yè)的時(shí)候，將會(huì)自動(dòng)加載再下一頁(yè)，頁(yè)面不會(huì)出現(xiàn)空白的情況，體驗(yàn)就非常爽了。

　　有一小部分帥氣（漂亮）的小伙伴可能就會(huì)問(wèn)了，那一直滾動(dòng)一直加載，后面不會(huì)很卡嗎？答案是不會(huì)的，上面說(shuō)到“只渲染可視區(qū)域的列表項(xiàng)，非可見(jiàn)區(qū)域的完全不渲染”，而一般是渲染3屏或者3頁(yè)數(shù)據(jù)，也就是說(shuō)，除了這3個(gè)，其余的統(tǒng)統(tǒng)不渲染，通俗點(diǎn)來(lái)說(shuō)就是看不見(jiàn)它就刪掉它，這樣在頁(yè)面中，就永遠(yuǎn)最多只會(huì)渲染3頁(yè)數(shù)據(jù)，除非你一行的數(shù)據(jù)量頁(yè)極大，不然不會(huì)出現(xiàn)卡頓的情況，請(qǐng)小伙伴們放心！形象點(diǎn)請(qǐng)看下圖：

　　回來(lái)我們今天的主角-Bootstrap Blazor UI庫(kù) Table 組件虛擬滾動(dòng)行，他是實(shí)現(xiàn)原理跟上面說(shuō)的大體一致，當(dāng)需要顯示大量數(shù)據(jù)時(shí)通常采用分頁(yè)加載數(shù)據(jù)，但是每次都要去點(diǎn)下一頁(yè)有時(shí)候也是一件繁瑣的事情，所以組件就支持虛擬滾動(dòng)啦！

　　功能的實(shí)現(xiàn)，其實(shí)是基于微軟官方的虛擬化組件，感興趣的小伙伴可以去看看，傳送門(mén)

　　而在我們的BootstrapBlazor 的 Table 組件中，怎么去使用虛擬滾動(dòng)呢，首先需要設(shè)置 ScrollMode Height RowHeight PageItems 參數(shù)對(duì)虛擬滾動(dòng)進(jìn)行設(shè)置，并將 ScrollMode 設(shè)置成 "ScrollMode.Virtual" 我們直接看看代碼

razor

<Table TItem = "Foo" IsBordered="true" IsStriped="true" Items="Items" ScrollMode="ScrollMode.Virtual">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="180" />
        <TableColumn @bind-Field="@context.Name" />
        <TableColumn @bind-Field="@context.Address" Readonly="true" />
        <TableColumn @bind-Field="@context.Education" />
        <TableColumn @bind-Field="@context.Count" Editable="false" />
        <TableColumn @bind-Field="@context.Complete" />
    </TableColumns>
</Table>

　　上面的Table 組件的數(shù)據(jù)源是使用了Items，也就是說(shuō)數(shù)據(jù)從開(kāi)始的時(shí)候已經(jīng)全部加載到了內(nèi)存中，只是部將其全部渲染到前端頁(yè)面而已，當(dāng)數(shù)據(jù)量非常大的時(shí)候，這種方式明顯是不適合的，會(huì)給服務(wù)端帶來(lái)很大的壓力，我們可以通過(guò)設(shè)置 Table 組件的 OnQueryAsync 回調(diào)，動(dòng)態(tài)獲取數(shù)據(jù)，用法上需要注意的一個(gè)點(diǎn)是，虛擬滾動(dòng)的開(kāi)始頁(yè)碼屬性，不再是使用 options.PageIndex 而是使用 options.StartIndex

razor

<Table TItem = "Foo" IsBordered="true" IsStriped="true" ScrollMode="ScrollMode.Virtual" OnQueryAsync="OnQueryAsync">
   <TableColumns>
       <TableColumn @bind-Field="@context.DateTime" Width="180" />
       <TableColumn @bind-Field="@context.Name" />
       <TableColumn @bind-Field="@context.Address" Readonly="true" />
       <TableColumn @bind-Field="@context.Education" />
       <TableColumn @bind-Field="@context.Count" Editable="false" />
       <TableColumn @bind-Field="@context.Complete" />
   </TableColumns>
</Table>

razor.cs

private async Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
{
    await Task.Delay(200);
    var items = Items.Skip(options.StartIndex).Take(options.PageItems);
    return new QueryData<Foo>()
    {
        Items = items,
        TotalCount = Items.Count
    };
}