SelectTable

输入框下方弹出多列表格,回车筛选、上下键选行、回车选中。

最后更新

说明

Columns 复用 TableColumn 定义多列,Items 为数据源;输入关键字回车按列过滤(可用 OnQuery 走远程),上下键移动高亮行,回车选中并回填 Value。ValueField / TextField 指定主键与回显字段。

常见能力:

  • 多列表格下拉
  • 回车筛选
  • 上下键选行
  • 整行回调
  • 远程查询

用法

<SelectTable TItem="@typeof(Order)" Columns="@columns" Items="@orders" ValueField="Id" TextField="Customer" @bind-Value="@id" OnSelected="@OnPick" />

API 参数

参数 类型 默认值 说明
Columns List<TableColumn> — 列定义,复用 TableColumn。
EmptyText string — 无匹配数据提示。
Icon string — 输入框左侧图标。
Id string —
Invalid bool — 错误状态。
Items List<TItem> — 数据源。
OnQuery Func<string, Task<List<TItem>>> — 远程查询:回车时以关键字拉取数据,返回结果作为表格行。
OnSelected EventCallback<TItem> — 事件 选中整行回调。
Placeholder string — 占位提示。
Size string — 尺寸:lg / sm。
TextField string — 触发框回显文本的字段名,默认取 ValueField。
Value string — 绑定值(选中行的主键文本)。
ValueChanged EventCallback<string> — 事件
ValueField string — 作为绑定值的字段名,默认取第一列。
Visible bool true 取得或设置组件是否可见,默认为false。
VisibleChanged EventCallback<bool> — 事件 取得或设置组件可见性变化时的回调事件。
Class string null 取得或设置组件的CSS类名,用于自定义样式。
Disabled bool false 取得或设置组件是否禁用,默认为false。
Style string null 取得或设置组件的内联样式,用于自定义样式。

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

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