UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读本文围绕 ng-zorro-antd 表格组件nz-table的「带边框」主题展开系统讲解如何为表格添加完整边框线、仅外边框、自定义页头Title与页脚Footer四种能力。你将掌握nzBordered、nzOuterBordered、nzTitle、nzFooter四个输入属性的用法、默认值与全局配置方式并理解其背后的组件模板与样式源码实现从而在业务中快速搭建出带边框、带标题的正式数据报表。1. 功能概述一次配置四类视觉增强在 ng-zorro-antd 的表格 demo 体系中bordered.md 对应的示例bordered.ts演示了表格的四种常用视觉能力完整边框nzBordered为表格的每一行、每一列、表头与表尾单元格都绘制边框线仅外边框nzOuterBordered只保留表格整体的外轮廓线内部单元格不画线页头nzTitle在表格主体上方渲染一行标题区域页脚nzFooter在表格主体下方渲染一行页脚区域。示例组件NzDemoTableBorderedComponent在模板中同时声明了两张表格第一张使用nzBordered全边框第二张使用nzOuterBordered外边框两者都通过nzTitleHeader与nzFooterFooter配置了标题与页脚方便直观对比两种边框模式。2. 最小可运行示例以下代码完整还原自仓库示例 bordered.ts可直接复制使用依赖NzTableModule通过imports: [NzTableModule]引入import { Component } from angular/core; import { NzTableModule } from ng-zorro-antd/table; Component({ selector: nz-demo-table-bordered, imports: [NzTableModule], template: nz-table #borderedTable nzBordered nzFooterFooter nzTitleHeader [nzData]dataSet thead tr thName/th thAge/th thAddress/th /tr /thead tbody for (data of borderedTable.data; track data) { tr td{{ data.name }}/td td{{ data.age }}/td td{{ data.address }}/td /tr } /tbody /nz-table nz-table #outBordered nzOuterBordered nzFooterFooter nzTitleHeader [nzData]dataSet thead tr thName/th thAge/th thAddress/th /tr /thead tbody for (data of outBordered.data; track data) { tr td{{ data.name }}/td td{{ data.age }}/td td{{ data.address }}/td /tr } /tbody /nz-table }) export class NzDemoTableBorderedComponent { dataSet [ { name: John Brown, age: 32, address: New York No. 1 Lake Park }, { name: Jim Green, age: 42, address: London No. 1 Lake Park }, { name: Joe Black, age: 32, address: Sidney No. 1 Lake Park } ]; }要点说明表格声明了#borderedTable/#outBordered模板引用变量tbody内通过borderedTable.data/outBordered.data遍历数据——当nzData传入且开启前端分页nzFrontPagination默认开启时nz-table的data属性返回当前页的数据子集for (data of borderedTable.data; track data)为 Angular 新版控制流语法track提供变更检测追踪键nzTitle、nzFooter在模板中直接以字符串字面量形式绑定nzTitleHeader也可通过属性绑定传入TemplateRef实现完全自定义渲染详见第 4 节。3. 边框模式详解nzBordered 与 nzOuterBordered3.1 nzBordered完整边框nzBordered控制是否显示表格的所有边框单元格之间、表头、表体、表尾。设置后组件根容器会被加上ant-table-bordered样式类Ant Design 主题中的表格边框规则随之生效。参数说明类型默认值全局配置[nzBordered]是否显示所有表格边框booleanfalse✅ 支持表格参数对照可参见官方 API 文档 components/table/doc/index.en-US.md 与 components/table/doc/index.zh-CN.md。3.2 nzOuterBordered仅外边框nzOuterBordered只绘制表格整体外轮廓标题、表体容器、页脚的外框内部单元格不画分隔线适合希望保持清爽行列间距、又需要明确区块边界的场景。参数说明类型默认值全局配置[nzOuterBordered]是否仅显示表格外边框booleanfalse不支持3.3 源码视角两个属性的底层实现在组件实现 table.component.ts 中可以看到两个属性均声明为InputInput({ transform: booleanAttribute }) nzOuterBordered false; Input({ transform: booleanAttribute }) WithConfig() nzBordered: boolean false;由此可以确认三个实现细节booleanAttribute转换两个属性都允许以纯布尔属性形式使用如nzBordered、nzOuterBorderedAngular 会自动将空属性值转为trueWithConfig()装饰器nzBordered支持通过全局配置NZ_CONFIG模块键nzTable统一设置默认值适用于全站表格默认带边框的规范化场景而nzOuterBordered不支持全局配置类名映射逻辑模板第 76-77 行[class.ant-table-bordered]nzBordered [class.nz-table-out-bordered]nzOuterBordered !nzBordered当nzBordered为true时整个表格容器挂上ant-table-bordered由 Ant Design 主题样式绘制完整边框nzOuterBordered单独生效时容器挂上自定义类nz-table-out-bordered。当两者同时为true时nzBordered优先级更高nzOuterBordered !nzBordered即只表现完整边框。nz-table-out-bordered的具体样式定义位于 patch.less.nz-table-out-bordered { .{table-prefix-cls}-title { border: table-border; border-bottom: 0; } .{table-prefix-cls}-container { border: table-border; border-bottom: 0; } .{table-prefix-cls}-footer { border: table-border; border-top: 0; } }从这段样式可以看出外边框的构成方式标题区ant-table-title、表体容器ant-table-container与页脚区ant-table-footer自上而下分别描边相邻区域共享边线标题/容器底部边线置 0、页脚顶部边线置 0最终在视觉上连成一个完整的外框。这也解释了为什么页头与页脚是外边框视觉的一部分——外边框模式天然依赖标题与页脚结构的存在。4. 页头与页脚nzTitle 与 nzFooter4.1 参数说明参数说明类型默认值[nzTitle]表格标题渲染内容string \| TemplateRefvoid-[nzFooter]表格页脚渲染内容string \| TemplateRefvoid-两者都支持两种传入方式字符串nzTitleHeader/nzFooterFooter直接以文本渲染模板引用传入TemplateRefvoid可放入任意 Angular 模板内容按钮、统计信息、富文本等。4.2 模板引用示例// 组件模板中定义页头模板 ng-template #titleTpl span客户信息报表/span nz-tag nzColorblue共 {{ dataSet.length }} 条/nz-tag /ng-template nz-table nzBordered [nzData]dataSet [nzTitle]titleTpl [nzFooter]数据更新时间2026-09-28 !-- thead / tbody 略 -- /nz-tablenzTitle/nzFooter也可与nzOuterBordered组合实现外边框 自定义标题/页脚的报表外观。4.3 渲染原理NzTableTitleFooterComponent在 table.component.ts 的模板中页头与页脚由统一的nz-table-title-footer组件承载if (nzTitle) { nz-table-title-footer [title]nzTitle / } !-- 表体容器nz-table-inner-scroll 或 nz-table-inner-default -- if (nzFooter) { nz-table-title-footer [footer]nzFooter / }即标题区渲染在表体容器之前页脚区渲染在表体容器之后各自仅在对应输入非空时才创建。nz-table-title-footer的实现见 title-footer.component.tstemplate: ng-container *nzStringTemplateOutlettitle{{ title }}/ng-container ng-container *nzStringTemplateOutletfooter{{ footer }}/ng-container , host: { [class.ant-table-title]: title ! null, [class.ant-table-footer]: footer ! null }核心机制nzStringTemplateOutlet来自ng-zorro-antd/core/outlet的字符串/模板统一出口指令。若传入值是字符串则直接插值文本若是TemplateRef则渲染模板从而让nzTitle/nzFooter单一属性同时支持两种形态宿主类名切换标题存在时挂ant-table-title页脚存在时挂ant-table-footer这两个类正是 Ant Design 主题中标题/页脚样式背景色、内边距、字号等的作用点也是上一节外边框样式锚定的对象。5. 进阶组合边框 固定表头/列、尺寸、汇总行带边框模式并不是孤立特性它与表格其他能力天然兼容。仓库中相关 demo 展示了常见组合方式固定表头/列fixed-columns-header.md、fixed-columns.md示例见 components/table/demo展示了nzScroll与边框同时使用时虚拟滚动区域内的单元格边框在 patch.less 中有专门处理如ant-table-bordered下固定右侧列的补边、table-border在thead/tbody/tfoot单元格上的border-inline-end确保横向滚动时边框不丢失尺寸compactsize.md示例可与nzBordered组合边框模式下middle/small尺寸会同步调整单元格内边距相关兼容样式同样在 patch.less 的nz-table-out-bordered与ant-table-bordered分支中体现汇总行summary.md示例中nzSummary汇总行位于表体之后与nzFooter页脚区域可共存常用于合计行 说明页脚的报表布局。6. 全局默认配置可选由于nzBordered带有WithConfig()标记模块键nzTable可以在应用全局配置中为所有表格统一开启边框避免每个组件重复书写import { NZ_CONFIG, NzConfig } from ng-zorro-antd/core/config; const ngZorroConfig: NzConfig { table: { nzBordered: true // 可同时配置 nzSize: middle 等其他 table 全局项 } }; // 在应用或模块级 providers 中提供 providers: [{ provide: NZ_CONFIG, useValue: ngZorroConfig }]全局配置机制详见仓库文档 global-config.en-US.md / global-config.zh-CN.md。注意nzOuterBordered不支持全局配置需要在每个nz-table上显式声明。7. 小结通过本篇文章你已掌握 ng-zorro-antd 表格「带边框、页头、页脚」的完整用法需求属性生效位置全局配置完整边框nzBordered全部单元格✅仅外边框nzOuterBordered标题/表体/页脚外轮廓❌页头nzTitle表体上方-页脚nzFooter表体下方-其中nzOuterBordered的视觉构成依赖标题与页脚结构见 patch.less两者同时开启时nzBordered优先。结合 bordered.ts 的完整示例与 table.component.ts 的源码实现你可以根据业务需要自由组合出全边框、外边框、自定义标题/页脚等多种报表形态。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd 描述列表带边框模式实战nzBordered、nzSpan 与表格化渲染原理ng zorro antd 描述列表带边框模式实战nzBordered、nzSpan 与表格化渲染原理 本篇围绕 ng zorro antd 中 nz desUI组件前端ng-zorro-antd Collapse 简洁风格无边框实战指南nzBordered 用法、实现原理与最佳实践ng zorro antd Collapse 简洁风格无边框实战指南 nzBordered 用法、实现原理与最佳实践 在基于 Ant Design 的 AUI组件前端ng-zorro-antd 弹窗页脚定制完全指南nzFooter 属性与 nzModalFooter 指令实战解析ng zorro antd 弹窗页脚定制完全指南nzFooter 属性与 nzModalFooter 指令实战解析 在 ng zorro antd 中 nzUI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考