Gitee 開源地址爲：
https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github 開源地址爲：
https://github.com/ArgoZhang/BootstrapBlazor
在線演示網站：
https://www.blazor.zone
1、前言
Table（表格）組件應該是做管理型網站開發的核心組件了，通過 Table 可以衍生出非常多的功能，由於這套組件幾乎沒有宣傳，導致知道的人不是很多，但是很多小夥伴都是使用了其他一些開源 blazor 項目後發現 Table 組件根本無法使用。
加載數據太卡
功能缺失太多
那麼從今天開始正式介紹一下性能爆炸，操作簡單的 BootstrapBlazor 組件庫中的最強王者組件 Table，由於功能實在是太多，僅示例目前網站中就有近 60 個各種實戰中需要的功能。
表格文檔：
https://www.blazor.zone/tables
2、一句代碼生成表格
BootstrapBlazor 組件庫的 Table 組件有一個屬性 AutoGenerateColumns，當設置其值爲 true 時，會根據綁定模型的屬性進行自動生成列信息，爲開發人員節約了大量的代碼，先看示例代碼：
備註：安裝預覽版的
BootstrapBlazor纔有AutoGenerateColumns屬性
index.razor 文件
<Table TItem="UserInfo" Items="@UserInfoList" AutoGenerateColumns="true" />
@code {
//模擬生成數據
private static readonly Random random = new Random();
protected static List<UserInfo> GenerateUserInfos() => new List<UserInfo>(Enumerable.Range(1, 10).Select(i => new UserInfo()
{
Id = i,
Name = $"張三 {i:d4}",
Address = $"上海市普陀區金沙江路 {random.Next(1000, 2000)} 弄",
Age = random.Next(20, 50),
Mobile = "1301234" + random.Next(1000, 9999)
}));
protected static IEnumerable<UserInfo> UserInfoList { get; } = GenerateUserInfos();
}
UserInfo.cs 類
public class UserInfo
{
public int Id { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public int Age { get; set; }
public string Mobile { get; set; }
}
再來看看效果圖如何：
你沒看錯，就這麼很簡單的幾句代碼生成了一個可展示的表格。
下巴掉地上了吧，先收起來，這麼簡單？
下面再加入一些表單功能試試看，將 index.razor 代碼修改如下：
<Table
TItem="UserInfo"
Items="@UserInfoList"
AutoGenerateColumns="true"
ShowToolbar="true" />
僅僅加入了 ShowToolbar="true" 這句代碼而已。截個圖瞅瞅：
工具欄有了！但是點擊按鈕右下角提示需要實現保存數據方法。我們再來試試看：
<Table
TItem="UserInfo"
Items="@UserInfoList"
AutoGenerateColumns="true"
ShowToolbar="true"
IsMultipleSelect="true" //--> 開啓多選框，用於編輯刪除選擇數據
OnSaveAsync="@OnSaveAsync" //--> 提供保存數據方法
/>
在 index.razor 的 @code 大括號里加入一個 OnSaveAsync 方法：
//這裏只是演示，沒有增加修改數據
protected Task<bool> OnSaveAsync(UserInfo userInfo)
{
return Task.FromResult(true);
}
這次也是僅僅加入了四五行代碼而已。截個圖瞅瞅：
新增數據對話框有了！
編輯對話框有了！
刪除操作有了！
到這裏我相信大家已經有了躍躍欲試的感覺，那就別客氣，動手吧~~
3、表格美化：
1) 加入斑馬紋效果
加入屬性：IsStriped="true" 即可
代碼看起來是這樣的：
<Table
TItem="UserInfo"
Items="@UserInfoList"
AutoGenerateColumns="true"
ShowToolbar="true"
IsMultipleSelect="true"
OnSaveAsync="@OnSaveAsync"
IsStriped="true"/>
2) 加入邊框
加入屬性：IsBordered="true" 即可
代碼看起來是這樣的：
<Table
TItem="UserInfo"
Items="@UserInfoList"
AutoGenerateColumns="true"
ShowToolbar="true"
IsMultipleSelect="true"
OnSaveAsync="@OnSaveAsync"
IsStriped="true"
IsBordered="true"/>
3) 緊湊型表格
加入屬性：TableSize="TableSize.Compact" 即可。
代碼太簡單就不展示了，免得有人罵我~~~（手動狗頭）
現在的樣子小而美~~
4) 生成列屬性更改
上面的截圖大家都看到了，標題都是類屬性名，自動生成的，（心裏暗罵這TM交給客戶不罵死我），彆着急，將 Display 特性加入到 UserInfo 類屬性上就可以自定義了。瞅瞅代碼：
using System.ComponentModel;
public class UserInfo
{
[DisplayName("自動編號")]
public int Id { get; set; }
[DisplayName("名稱")]
public string Name { get; set; }
[DisplayName("地址")]
public string Address { get; set; }
[DisplayName("年齡")]
public int Age { get; set; }
[DisplayName("手機號")]
public string Mobile { get; set; }
}
還有很多很多可以自定義的東西，比如，每一列的格式，排序等等等待您的探索，這一期就到這裏。以後還會繼續介紹更多組件，更多有意思的玩法。
希望您會喜歡，覺得有意思，加個關注，點個再看，再去
github上點個⭐。
推薦閱讀：
開發者精選資訊
每日爲您推薦開發精選資訊
長按二維碼
關注 「開發者精選資訊」 公衆號
好文章，我在看 ❤️