Bootstrap Blazor Table 組件（四）自定義列生成

原文鏈接：http://www.rzrgm.cn/ysmc/p/16223154.html

Bootstrap Blazor 官方鏈接：https://www.blazor.zone/tables

　　上一篇文章說到 Table 組件的智能生成，有了自動生成，肯定會有自定義的。

一、指定生成列

　　除了可以在 AutoGenerateColumnAttribute 特性中指定每一列的行為外，我們可以手動在 Table 的 TableColumns 標簽中自定義要展現的列與列具有的行為，在此之前，我們要先將 AutoGenerateColumns 屬性設置成 false（該屬性默認為 false）：

<Table TItem="Foo" IsPagination="true" PageItemsSource="PageItemsSource" ShowFooter="true"
       IsStriped="true" IsBordered="true" ShowSkeleton="true" IsMultipleSelect="true"
       ShowToolbar="true" ShowSearch="true" ShowExtendButtons="true" OnQueryAsync="@OnQueryAsync"
       AutoGenerateColumns="false" EditMode="EditMode.Popup">
    <TableColumns>
        <TableColumn @bind-Field="@context.Name"></TableColumn>
        <TableColumn @bind-Field="@context.DateTime"></TableColumn>
        <TableColumn @bind-Field="@context.Address"></TableColumn>
        <TableColumn @bind-Field="@context.Count"></TableColumn>
    </TableColumns>
</Table>

二、定義列功能

　　我們還可以在 TableColumn 中指定每一列具有的功能，如過濾、排序、是否可編輯等等；在此，我們將日期（DateTime）與數量（Count）兩列分別賦予排序與過濾功能

<Table TItem="Foo" IsPagination="true" PageItemsSource="PageItemsSource" ShowFooter="true"
       IsStriped="true" IsBordered="true" ShowSkeleton="true" IsMultipleSelect="true"
       ShowToolbar="true" ShowSearch="true" ShowExtendButtons="true" OnQueryAsync="@OnQueryAsync"
       AutoGenerateColumns="false" EditMode="EditMode.Popup">
    <TableColumns>
        <TableColumn @bind-Field="@context.Name"></TableColumn>
        <TableColumn @bind-Field="@context.DateTime" Sortable="true" Filterable="true"></TableColumn>
        <TableColumn @bind-Field="@context.Address"></TableColumn>
        <TableColumn @bind-Field="@context.Count" Sortable="true" Filterable="true"></TableColumn>
    </TableColumns>
</Table>

　　可以看到，過濾功能還會根據你的屬性類型，自動生成日期選擇框，免除你還要手動輸入煩惱，同時，新增與編輯按鈕也會根據你設置的列自動生成相應的表單：

三、自定義單元格

　　肯定有小伙伴問了，那我想自定義每一個單元格可以嗎？那必須是可以的，使用 TableColumn 中的 Template 可以實現你任何想要實現的效果，下面我來演示一下，例如當數量小于 30 時，將數量顯示成紅色：

<Table TItem="Foo" IsPagination="true" PageItemsSource="PageItemsSource" ShowFooter="true"
       IsStriped="true" IsBordered="true" ShowSkeleton="true" IsMultipleSelect="true"
       ShowToolbar="true" ShowSearch="true" ShowExtendButtons="true" OnQueryAsync="@OnQueryAsync"
       AutoGenerateColumns="false" EditMode="EditMode.Popup">
    <TableColumns>
        <TableColumn @bind-Field="@context.Name"></TableColumn>
        <TableColumn @bind-Field="@context.DateTime" Sortable="true" Filterable="true"></TableColumn>
        <TableColumn @bind-Field="@context.Address"></TableColumn>
        <TableColumn @bind-Field="@context.Count" Sortable="true" Filterable="true">
            <Template Context="row">
                @if (row.Value < 30)
                {
                    <span>
                        <font color="red">
                            @row.Value
                        </font>
                    </span>
                }
                else
                {
                    <span>
                        <font>
                            @row.Value
                        </font>
                    </span>
                }
            </Template>
        </TableColumn>
    </TableColumns>
</Table>