本示例是AntDesign Blazor的入門示例，在學(xué)習(xí)的同時(shí)分享出來(lái)，以供新手參考。
示例代碼倉(cāng)庫(kù)：https://gitee.com/known/BlazorDemo
1. 學(xué)習(xí)目標(biāo)
- 使用
Table組件創(chuàng)建列表頁(yè)面 - 使用
DisplayName特性顯示中文表頭 - 使用模板和
Tag組件顯示高溫?cái)?shù)據(jù) - 使用
TitleTemplate自定義欄位表頭
2. 創(chuàng)建Table列表
1）雙擊打開Components\Pages\Weather.razor頁(yè)面組件，刪除如下代碼。
2）添加如下Table組件，將天氣數(shù)據(jù)綁定到DataSource屬性上，定義列表屬性欄位。
3）點(diǎn)擊運(yùn)行按鈕，效果如下：
3. 顯示中文表頭
1）優(yōu)化列表字段顯示為中文名稱，在WeatherForecast類的屬性上添加DisplayName特性，需要引用命名空間@using System.ComponentModel
2）點(diǎn)擊運(yùn)行按鈕，效果如下：
4. 使用模板顯示高溫?cái)?shù)據(jù)
1）優(yōu)化列表溫度欄，當(dāng)溫度大于30時(shí)用紅色標(biāo)記顯示，這里需要用到模板列，模板中用Tag組件來(lái)顯示高溫?cái)?shù)據(jù)，優(yōu)化代碼如下：
2）點(diǎn)擊運(yùn)行按鈕，效果如下：
5. 顯示自定義表頭
1）使用TitleTemplate自定義溫度標(biāo)題，在標(biāo)題前插入一個(gè)Icon字體圖標(biāo)。
2）點(diǎn)擊運(yùn)行按鈕，效果如下：
6. 總結(jié)
關(guān)于Table組件的創(chuàng)建和內(nèi)容顯示基本分享這些，標(biāo)題模板和數(shù)據(jù)模板基本上滿足實(shí)際項(xiàng)目需求，具體需求可以通過(guò)此例舉一反三；其他更多示例可參考AntDesign Blazor的官網(wǎng)文檔 https://antblazor.com/zh-CN/components/table 。
