1. 程式人生 > >Bootstrap Blazor 元件介紹 Table (二)自定義模板列功能介紹

Bootstrap Blazor 元件介紹 Table (二)自定義模板列功能介紹

Bootstrap Blazor 是一套企業級 UI 元件庫,適配移動端支援各種主流瀏覽器,已經在多個交付專案中使用。通過本套元件可以大大縮短開發週期,節約開發成本。目前已經開發、封裝了 70 多個元件,歡迎有興趣的同學試用。 Gitee 開源地址為:https://gitee.com/LongbowEnterprise/BootstrapBlazor Github 開源地址為:https://github.com/ArgoZhang/BootstrapBlazor 線上演示網站:https://www.blazor.zone ### 前言 Table(表格)元件應該是做管理型網站開發的核心元件了,通過 Table 可以衍生出非常多的功能,上一章節對 `Table` 的[自動生成列](https://www.cnblogs.com/argozhang/p/14067391.html)強大功能進行了介紹,本章詳細介紹 Table 元件列的其他屬性以及用法。 ### 自定義列 在實際開發中有時候資料庫儲存的是 true/false,而現實的時候為了美化需要顯示開關元件或者複選框元件,在 `BootstrapBlazor` 元件中自定義類模板功能非常簡單,程式碼如下: ``` ``` **小技巧** 模板類中 Context 是繫結模型,變數名預設使用 context 當模板中再次使用時與原有的衝突,通過設定 `Context="v"` 將原有變數名 context 更改為 `v`,方便後面使用 模板中通過 `Swtich` 元件將布林變數更改為開關元件來呈現,效果圖如下: ![](https://img2020.cnblogs.com/blog/1728180/202012/1728180-20201202200358396-1458663235.png) **劃重點** 模板列中上下文 `Context` 是元件提供的 `TableColumnContext ` 資料型別,其屬性如下 - Value 為當前繫結列的資料值 - Row 為當前繫結列所在行的資料值 所以在模板列中獲取所在行其他列資料時也是非常方便的,有興趣學習 Blazor 的請加 QQ 群 795206915 更多列相關技巧請檢視 [BootstrapBlaozr 演示](https://www.blazor.zone/tables/column),下一篇講解列資料格式介紹