BootstrapBlazor - EditorForm 表单组件（一）

原文链接：https://www.cnblogs.com/ysmc/p/16053652.html

官网例子链接：https://www.blazor.zone/editorforms

通过绑定数据模型自动呈现编辑表单

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

• 绑定模型默认自动生成全部属性，可以通过设置 AutoGenerateAllItem 更改为不自动生成
• 如不需要编辑列，设置 Editable 即可，默认值为 true 生成编辑组件
• 复杂编辑列，设置 EditTemplate 模板，进行自定义组件进行编辑
• 表单内按钮可以设置多个，设置 Buttons 模板即可

<EditorForm Model="@Model">
   <FieldItems>
      <EditorItem @bind-Field="@context.Education" Editable="false" />
         <EditorItem @bind-Field="@context.Complete" Editable="false" />
         <EditorItem @bind-Field="@context.Hobby" Items="@Hobbys" />
      </FieldItems>
      <Buttons>
         <Button Icon="fa fa-save" Text="提交" />
      </Buttons>
</EditorForm>

Attributes 属性

参数	说明	类型	可选值	默认值
Model	当前绑定数据模型	TModel	—	—
FieldItems	绑定列模板	RenderFragment<TModel>	—	—
Buttons	按钮模板	RenderFragment	—	—
IsDisplay	是否显示为 Display 组件	bool	true/false	false
ShowLabel	是否显示 Label	bool	true/false	true
ShowLabelTooltip	鼠标悬停标签时显示完整信息	bool?	true/false/null	null
AutoGenerateAllItem	是否生成所有属性	bool	true/false	true
ItemsPerRow	每行显示组件数量	int?	—	—
RowType	设置组件布局方式	RowType	Row|Inline	Row
LabelAlign	Inline 布局模式下标签对齐方式	Alignment	None|Left|Center|Right	None

 AttrAttributeTitle

参数	说明	类型	可选值	默认值
Field	当前绑定数据值	TValue	—	—
FieldType	绑定列数据类型	Type	—	—
Editable	是否允许编辑	bool	true/false	true
Readonly	是否只读	bool	true/false	false
Text	编辑列前置标签名	string	—	—
EditTemplate	列编辑模板	RenderFragment<object>	—	—