下面bootstrap栏目带大家了解一下bootstrapblazor中的table组件，介绍一下table组件的自动生成列功能，希望对大家有所帮助！
bootstrap blazor 是一套企业级 ui 组件库，适配移动端支持各种主流浏览器，已经在多个交付项目中使用。通过本套组件可以大大缩短开发周期，节约开发成本。目前已经开发、封装了 70 多个组件。
gitee 开源地址为：https://gitee.com/longbowenterprise/bootstrapblazor
github 开源地址为：https://github.com/argozhang/bootstrapblazor
在线演示网站：https://www.blazor.zone
table 应该是做管理型网站开发的核心组件了，通过 table 可以衍生出非常多的功能，由于这套组件几乎没有宣传，导致知道的人不是很多，但是很多小伙伴都是使用了其他一些开源 blazor 项目后发现 table 组件根本无法使用。
加载数据太卡功能缺失太多那么从今天开始正式介绍一下性能爆炸，操作简单的 bootstrapblazor 组件库中的最强王者组件 table，由于功能实在是太多，仅示例目前网站中就有近 60 个各种实战中需要的功能，再接下来的时间里我们一一介绍
自动生成列功能
使用 table 组件时大多数组件都是要求用户输入显示那些列，这样会在 razor 文件中增加大量列相关信息，如下所示
<tablecolumn @bind-field="@context.datetime" width="180" /><tablecolumn @bind-field="@context.name" /><tablecolumn @bind-field="@context.address" /><tablecolumn @bind-field="@context.education" /><tablecolumn @bind-field="@context.count" /><tablecolumn @bind-field="@context.complete">
如果一个实体类属性太多时。这里书写起来就会篇幅非常长，bootstrapblazor 组件库的 table 组件有一个属性 autogeneratecolumns ，当设置其值为 true 时，会根据绑定模型的属性进行自动生成列信息，为开发人员节约了大量的代码，先看示例
<table titem="binditem" isstriped="true" isbordered="true" ismultipleselect="true" showtoolbar="true" showextendbuttons="true" autogeneratecolumns="true" onqueryasync="@oneditqueryasync" onresetsearchasync="@onresetsearchasync" onsaveasync="@onsaveasync" ondeleteasync="@ondeleteasync"></table>
怎么样？通过这一行代码就完成了表格的全自动生成，并且提供了增、删、改、查、过滤、排序等等全部功能。效果图如下
是不是有一些心动，这么少的代码居然可以实现这么多功能？没错！用 bootstrapblazor 组件库的 table 组件开发就是这么简单。
划重点
使用 table 组件 ui 层面的基本操作均已经封装到组件功能中，开发人员只需要将精力转移到数据库的操作上去，如例子中的
onqueryasync 数据查询方法onsaveasync 数据保存方法（内部自动判断主键执行插入或者更新操作）ondeleteasync 数据删除方法 （可自行进行真实删除或者标记删除操作）onresetsearchasync 重置搜索方法实现原理
table 组件为泛型组件，通过 titem 设定绑定模型类型为 binditem 实体类，在这个实体类中通过 autogeneratecolumnattribute 标签对自动生成列规则进行设置，具体参数如下：
[attributeusage(attributetargets.property)]public class autogeneratecolumnattribute : attribute, itablecolumn{ /// <summary> /// 获得/设置 显示顺序 /// </summary> public int order { get; set; } /// <summary> /// 获得/设置 是否忽略 默认为 false 不忽略 /// </summary> public bool ignore { get; set; } /// <summary> /// 获得/设置 当前列是否可编辑 默认为 true 当设置为 false 时自动生成编辑 ui 不生成此列 /// </summary> public bool editable { get; set; } = true; /// <summary> /// 获得/设置 当前列编辑时是否只读 默认为 false /// </summary> public bool readonly { get; set; } /// <summary> /// 获得/设置 是否允许排序 默认为 false /// </summary> public bool sortable { get; set; } /// <summary> /// 获得/设置 是否为默认排序列 默认为 false /// </summary> public bool defaultsort { get; set; } /// <summary> /// 获得/设置 是否为默认排序规则 默认为 sortorder.unset /// </summary> public sortorder defaultsortorder { get; set; } /// <summary> /// 获得/设置 是否允许过滤数据 默认为 false /// </summary> public bool filterable { get; set; } /// <summary> /// 获得/设置 是否参与搜索 默认为 false /// </summary> public bool searchable { get; set; } /// <summary> /// 获得/设置 列宽 /// </summary> public int? width { get; set; } /// <summary> /// 获得/设置 是否固定本列 默认 false 不固定 /// </summary> public bool fixed { get; set; } /// <summary> /// 获得/设置 列是否显示 默认为 true 可见的 /// </summary> public bool visible { get; set; } = true; /// <summary> /// 获得/设置 本列是否允许换行 默认为 false /// </summary> public bool allowtextwrap { get; set; } /// <summary> /// 获得/设置 本列文本超出省略 默认为 false /// </summary> public bool textellipsis { get; set; } /// <summary> /// 获得/设置 列 td 自定义样式 默认为 null 未设置 /// </summary> public string? cssclass { get; set; } /// <summary> /// 获得/设置 显示节点阈值 默认值 breakpoint.none 未设置 /// </summary> public breakpoint shownwithbreakpoint { get; set; } /// <summary> /// 获得/设置 格式化字符串 如时间类型设置 yyyy-mm-dd /// </summary> public string? formatstring { get; set; } /// <summary> /// 获得/设置 文字对齐方式 默认为 alignment.none /// </summary> public alignment align { get; set; } /// <summary> /// 获得/设置 字段鼠标悬停提示 /// </summary> public bool showtips { get; set; } /// <summary> /// 获得/设置 列格式化回调委托 /// </summary> public func<object?, task<string>>? formatter { get; set; } /// <summary> /// 获得/设置 编辑模板 /// </summary> public renderfragment<object>? edittemplate { get; set; } /// <summary> /// 获得/设置 显示模板 /// </summary> public renderfragment<object>? template { get; set; } /// <summary> /// 获得/设置 搜索模板 /// </summary> public renderfragment<object>? searchtemplate { get; set; } /// <summary> /// 获得/设置 过滤模板 /// </summary> public renderfragment? filtertemplate { get; set; } /// <summary> /// 获得/设置 列头显示文字未设置时显示字段名称 /// </summary> public string? text { get; set; }}
这里有大量可以限定的参数基本看注释就知道啦。更多 文档请查看在线演示文档 https://www.blazor.zone/tables/column
更多关于bootstrap的相关知识，可访问：bootstrap教程！！
以上就是浅析bootstrapblazor中table组件的自动生成列功能的详细内容。