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

ArgoZhang發表於2020-12-02
bootBlazor元件

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 演示，下一篇講解列資料格式介紹

相關文章