Blazor 组件库 BootstrapBlazor 中EditorForm组件介绍

组件介绍

EditorForm 组件是一个非常实用的组件，当进行数据编辑时，仅需要将 Model 属性赋值即可。

  • 绑定模型默认自动生成全部属性，可以通过设置 AutoGenerateAllItem 更改为不自动生成

  • 如不需要编辑列，设置 Editable 即可，默认值为 true 生成编辑组件

  • 复杂编辑列，设置 EditTemplate 模板，进行自定义组件进行编辑

  • 表单内按钮可以设置多个，设置 Buttons 模板即可

默认情况下，我们只需要绑定Model就可以了，最基础的代码可以只有一行。

会显示Model中的所有字段。


另外我们可以通过绑定内容来做其他的处理。


这个例子的代码如下：

其中，我们通过 EditorItem配置Education、Complete在EditorForm中不显示，并且配置Hobby为复选框组，并且指定可选内容。

组件的其他属性

Model：绑定的数据模型。

FieldItems：绑定的列模板，可以对每列进行单独处理。

Buttons：按钮模板，处理内部的按钮。

IsDisplay：是否显示为Display控件，默认为false

ShowLabel：是否显示Label，默认为true。

ShowLabelTooltip：是否在鼠标停留时显示全部信息，默认不显示。

AutoGenerateAllItem：是否生成全部字段。默认为ture。当设置为false的时候，则需要在FieldItems中自己设置所有需要显示的内容。

一个例子是：

这样就只显示Name和Count两个字段。

ItemsPerRow：每行显示组件数量，默认一行只显示一个控件。

RowType：组件布局方式，可选值为Row|Inline，默认值为Row。

LabelAlign：在Inline模式下标签的对齐方式，可选值有 None|Left|Center|Right

EditorItem 的属性

Field：绑定的字段。

FieldType：绑定字段的类型。如果绑定字段时使用了@bind-Field，这里会自动推断类型，可以不写FieldType。

Editable：是否允许编辑，默认为true。

Readonly：是否只读。

Text：前端标签的名字，ShowLabel为true的时候显示。

EditTemplate：自定义编辑模板。

一个例子：