Column

写在 Table 内部的列声明：列属性用标记给，单元格模板直接把 Razor 写在列里，context 就是当前行的强类型实体。

最后更新

说明

列的另一种写法，与 TableColumn 一一对应，直接写成

的标记内容。泛型 TItem 与所属表格一致、需逐列写明（Razor 的类型参数推断只看同一个元素上的属性值，单元格模板推不出 TItem），换来单元格标记里的 context 直接是强类型行，不用再 RowAs() 转换。组件不产出可见 DOM，只在初始化时把自己登记到所属表格（或所属分组表头）的列收集器里，所以书写顺序就是列顺序；列插槽挂在表格的 上。条件列请用 Visible 控制——用 @if 包裹时列会被重新挂载并登记到末尾，而不是回到原位。单元格模板就是列的 ChildContent，由表格在
中按行调用；省略时按 Field 直接取值渲染。分组表头把子列写进列自己的 插槽（子列同为 ），父列不给 Field。列头模板仍走
，但它和隐式写的单元格模板不能同时出现在一个列上（Razor 的 RZ9996：一个元素里只能选一种子内容写法）；两者都要时把单元格写成具名片段 ，此时行对象叫 row。表格的列也一样：同表还要写 、 等具名片段时，把列包进 。列的增删、宽度、可见性变化会通知表格重算表头与固定列偏移；只改单元格内容不会触发重算。

常见能力：

  • 标记声明列
  • 列体即单元格模板
  • context 为强类型行
  • 模板写列头
  • 嵌套成分组表头
  • Visible 控制条件列
  • 结构变化自动重算表头

用法

<Table TItem="UserInfo" Items="@users" ActionTitle="操作">
    @* 这里还有 <RowActions> 具名片段，所以列包进 <ChildContent>；纯列时直接写在 <Table> 里即可 *@
    <ChildContent>
        <Column TItem="UserInfo" Title="用户" Field="Name" Width="220px" Sortable="true" />
        <Column TItem="UserInfo" Title="状态" Field="Status" Width="92px">
            <StatusDot Tint="true" Status="@(IsOnline(context) ? "online" : "offline")" Text="@(IsOnline(context) ? "在线" : "离开")" />
        </Column>
        <Column TItem="UserInfo" Title="最近页面" Field="LastPage" MinWidth="120px" Ellipsis="true" Visible="@showPage" />
        @* 子列写进 <Columns> 即为分组表头；列上没有具名片段时，直接写的标记就是单元格模板 *@
        <Column TItem="UserInfo" Title="联系方式">
            <Columns>
                <Column TItem="UserInfo" Title="手机" Field="Mobile" Width="120px" />
                <Column TItem="UserInfo" Title="邮箱" Field="Email" Width="180px" />
            </Columns>
        </Column>
    </ChildContent>
    <RowActions Context="row">
        <Button Size="xs" Text="编辑" OnClick="@(() => Edit(row))" />
    </RowActions>
</Table>

API 参数

参数 类型 默认值 说明
Align string — 对齐方式：left / center / right。
ChildContent RenderFragment<TItem> — 单元格模板：列里直接写的标记就是它，context 即当前行（TItem）。省略时按 Field 直接取值渲染。
Columns RenderFragment — 子列：给出子 Column 时本列成为分组表头。
Ellipsis bool — 内容超出列宽时以省略号截断（需配合 Width）。
Field string — 取值字段名，对象属性或字典 key。
Filterable bool — 列头是否显示过滤输入框。
FilterPlaceholder string — 列头过滤框占位提示。
Fixed string — 固定列：横向滚动时钉在 left 或 right 一侧。
Header RenderFragment — 自定义列头模板，优先于 Title。
MergeRows bool — 相邻行取值相同时自动跨行合并。需配合 Field。
MinWidth string — 弹性列的最小宽度（像素），未设 Width 时的兜底宽度。
Sortable bool — 是否可排序。
Title string — 列标题，走本地化。
Visible bool true 取得或设置组件是否可见，默认为false。
VisibleChanged EventCallback<bool> — 事件 取得或设置组件可见性变化时的回调事件。
Width string — 列宽，支持 px/%/auto。
Class string null 取得或设置组件的CSS类名，用于自定义样式。
Disabled bool false 取得或设置组件是否禁用，默认为false。
Style string null 取得或设置组件的内联样式，用于自定义样式。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。

微信公众号二维码 扫码关注公众号
QQ 交流群二维码 扫码加入 QQ 群