　　今天我們來介紹一下 Bootstrap Blazor 中 Table 組件的虛擬滾動行，什么是虛擬滾動呢，我查到的解釋是：只渲染可視區域的串列項，非可見區域的完全不渲染，在滾動條滾動時動態更新串列項，

　　然后很明顯，在實際應用中不可能實作“非可見區域的完全不渲染”，這樣的體驗效果太差了，下拉直接空白，所以一般會渲染3屏或者是3頁資料，分別是當前頁、上一頁、下一頁，當用戶滾動到下一頁的時候，將會自動加載再下一頁，頁面不會出現空白的情況，體驗就非常爽了，

　　有一小部分帥氣（漂亮）的小伙伴可能就會問了，那一直滾動一直加載，后面不會很卡嗎？答案是不會的，上面說到“只渲染可視區域的串列項，非可見區域的完全不渲染”，而一般是渲染3屏或者3頁資料，也就是說，除了這3個，其余的統統不渲染，通俗點來說就是看不見它就刪掉它，這樣在頁面中，就永遠最多只會渲染3頁資料，除非你一行的資料量頁極大，不然不會出現卡頓的情況，請小伙伴們放心！形象點請看下圖：

　　回來我們今天的主角-Bootstrap Blazor UI庫 Table 組件虛擬滾動行，他是實作原理跟上面說的大體一致，當需要顯示大量資料時通常采用分頁加載資料，但是每次都要去點下一頁有時候也是一件繁瑣的事情，所以組件就支持虛擬滾動啦！

　　功能的實作，其實是基于微軟官方的虛擬化組件，感興趣的小伙伴可以去看看，傳送門

　　而在我們的BootstrapBlazor 的 Table 組件中，怎么去使用虛擬滾動呢，首先需要設定 ScrollMode Height RowHeight PageItems 引數對虛擬滾動進行設定，并將 ScrollMode 設定成 "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 組件的資料源是使用了Items，也就是說資料從開始的時候已經全部加載到了記憶體中，只是部將其全部渲染到前端頁面而已，當資料量非常大的時候，這種方式明顯是不適合的，會給服務端帶來很大的壓力，我們可以通過設定 Table 組件的 OnQueryAsync 回呼，動態獲取資料，用法上需要注意的一個點是，虛擬滾動的開始頁碼屬性，不再是使用 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
    };
}

原文鏈接：https://www.cnblogs.com/ysmc/p/16664945.html

寫在最后

Bootstrap Blazor 官網地址：https://www.blazor.zone

　　希望大佬們看到這篇文章，能給專案點個star支持下，感謝各位！

star流程：

1、訪問點擊專案鏈接：BootstrapBlazor

2、點擊star，如下圖，即可完成star，關注專案不迷路：

另外還有兩個GVP專案，大佬們方便的話也點下star唄，非常感謝：

　　BootstrapAdmin 專案地址：
　　https://gitee.com/LongbowEnterprise/BootstrapAdmin

　　SliderCaptcha 專案地址：
　　https://gitee.com/LongbowEnterprise/SliderCaptcha

交流群（QQ）歡迎加群討論

　　 BA & Blazor ①（795206915）　　　　　　　 BA & Blazor ②（675147445）

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/508700.html

標籤：.NET技术

上一篇：.NET 實作啟動時重定向程式運行路徑及 Windows 服務運行模式部署

下一篇：dotnet 讀 WPF 源代碼筆記 WPF 是如何做到一套代碼兼容多個 .NET Framework 版本

Bootstrap Blazor 開源UI庫介紹-Table 虛擬滾動行

寫在最后