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 的自動生成列強大功能進行了介紹，本章詳細介紹 Table 組件列的其餘屬性以及用法。

自定義列

在實際開發中有時候數據庫存儲的是 true/false，而現實的時候爲了美化須要顯示開關組件或者複選框組件，在 BootstrapBlazor 組件中自定義類模板功能很是簡單，代碼以下：

<TableColumn @bind-Field="@context.Complete">
      <Template Context="v">
            <Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
      </Template>
</TableColumn>

小技巧
模板類中 Context 是綁定模型，變量名默認使用 context 當模板中再次使用時與原有的衝突，經過設置 Context="v" 將原有變量名 context 更改成 v，方便後面使用

模板中經過 Swtich 組件將布爾變量更改成開關組件來呈現，效果圖以下：

劃重點

模板列中上下文 Context 是組件提供的 TableColumnContext 數據類型，其屬性以下

• Value 爲當前綁定列的數據值
• Row 爲當前綁定列所在行的數據值

因此在模板列中獲取所在行其餘列數據時也是很是方便的，有興趣學習 Blazor 的請加 QQ 羣 795206915

更多列相關技巧請查看 BootstrapBlaozr 演示，下一篇講解列數據格式介紹