UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载nz-table是 NG-ZORRO基于 Ant Design 的 Angular UI 组件库中最重要的数据展示组件用于以表格形式呈现结构化数据并支持排序、搜索、分页与筛选。本篇指南以 组件官方文档 为主体结合仓库源码components/table 目录深入讲解其用法、全部 API 参数、数据流处理链路与性能注意事项读完即可在 Angular 应用中熟练使用并驾驭服务端渲染、固定列、树形数据、虚拟滚动等高级场景。何时使用When To Use展示结构化数据集合当数据具有明确的列结构字段、类型、含义时表格是最直观的呈现方式。需要对数据进行排序、搜索、分页与筛选nz-table内置了完整的数据处理能力既可以完全在客户端完成前端分页、本地排序、本地筛选也可以只把它当作视图容器、把数据处理交给服务端服务端分页/排序/筛选。设计理念易用且高度可定制nz-table的设计遵循三个核心原则这也是理解整个组件 API 的钥匙1. 高度可定制Highly Customizablenz-table的使用方式对标 W3C 标准table语义你在模板里书写thead/tbody/tr/th/td组件不限制单元格内容开发者可以按需控制表格的每一个部分。2. 组件增强Component Enhancementsnz-table对th、td、thead等原生元素做了指令级增强。通过在标签上声明nzShowSort、nzShowFilter、nzLeft/nzRight等属性可以轻松实现可排序、可筛选、固定表头、固定列、服务端渲染等能力而不需要手写任何 JavaScript 逻辑。3. 数据处理Data Processing传入[nzData]的原始数据会先经过组件内部的处理管线分页 → 排序 → 筛选再把处理后的当前页数据以模板上下文Template Context形式暴露出来。配合 Angular 的for控制流即可渲染当前页数据。快速上手基础用法最简单的用法只需要一个nz-table组件、一个[nzData]绑定以及在tbody里用for遍历模板上下文暴露的datanz-table #basicTable [nzData]dataSet thead tr thName/th thAge/th thAddress/th thAction/th /tr /thead tbody for (data of basicTable.data; track data.name) { tr td{{data.name}}/td td{{data.age}}/td td{{data.address}}/td td aAction 一 {{data.name}}/a nz-divider nzTypevertical/nz-divider aDelete/a /td /tr } /tbody /nz-table对应的组件类与仓库 basic demo 一致#basicTable通过exportAs: nzTable暴露模板引用import { Component } from angular/core; import { NzDividerModule } from ng-zorro-antd/divider; import { NzTableModule } from ng-zorro-antd/table; interface Person { key: string; name: string; age: number; address: string; } Component({ selector: nz-demo-table-basic, imports: [NzDividerModule, NzTableModule], template: !-- 上面的模板 -- }) export class NzDemoTableBasicComponent { listOfData: Person[] [ { key: 1, name: John Brown, age: 32, address: New York No. 1 Lake Park }, { key: 2, name: Jim Green, age: 42, address: London No. 1 Lake Park }, { key: 3, name: Joe Black, age: 32, address: Sidney No. 1 Lake Park } ]; }几个要点basicTable.data是处理后的当前页数据不是原始nzData的引用而是经过分页/排序/筛选管线输出后的结果。若关闭了前端分页nzFrontPaginationfalse它即为处理后的全部数据。track参数for (data of basicTable.data; track data.name)中的track用于优化变更检测与 DOM 复用建议使用稳定且唯一的字段如key、id。导入模块需要imports: [NzTableModule]来源见 table.module.ts示例中同时用到了NzDividerModule。分页、排序与筛选数据是怎么被处理的从源码结构看数据处理由组件级服务 NzTableDataService 承担它以BehaviorSubject维护pageIndex、pageSize、listOfData、listOfCalcOperator各列的排序函数/排序方向/筛选函数/筛选值等状态并通过combineLatestdebounceTime组合出最终的分页切片与查询参数。也就是说分页、排序、筛选是响应式联动的任一输入变化都会触发重新计算。开启排序与筛选只需在th上声明对应属性nz-table #filterTable [nzData]displayData thead tr th nzColumnKeyname [nzFilters][{ text: Joe, value: Joe }, { text: Jim, value: Jim }] [nzFilterFn]nameFilterFn Name/th th nzColumnKeyage [nzSortFn]ageSortFn [nzSortDirections][ascend, descend]Age/th /tr /thead tbody for (data of filterTable.data; track data.name) { ... } /tbody /nz-tablenameFilterFn(value: string | null, data: Person): boolean { return value null || data.name.indexOf(value) ! -1; } ageSortFn(a: Person, b: Person): number { return a.age - b.age; }前端处理 vs 服务端处理场景nzFrontPaginationnzSortFn/nzFilterFn数据来源前端分页 本地排序筛选true默认传入比较/过滤函数[nzData]服务端分页/排序/筛选false设为true占位标记监听(nzQueryParams)后自行拉取客户端排序时nzSortFn是传给Array.sort的比较函数(a, b) number类型见 table.types.ts 的NzTableSortFn客户端筛选时nzFilterFn返回boolean决定该行是否保留。服务端场景下把nzSortFn/nzFilterFn设为true即可让组件仅上报状态而不做本地计算真正的查询逻辑由你在(nzQueryParams)回调中实现。完整 API 参考以下参数表完整继承自官方文档并结合源码补充说明。nz-table容器组件Property说明类型默认值全局配置[nzData]要渲染的数据记录数组T[]-[nzFrontPagination]是否在客户端分页。若数据由服务端分页或希望一次展示全部数据而不分页应设为falsebooleantrue[nzTotal]数据总条数。当nzFrontPagination为false时必须设置number-[nzCustomColumn]控制列的显示与排序启用后nzWidthConfig与th上的[nzWidth]将不生效NzCustomColumn[]-[nzPageIndex]当前页码支持双向绑定number-[nzPageSize]每页条数支持双向绑定number-[nzShowPagination]是否在表格底部显示分页组件booleantrue[nzPaginationPosition]分页位置top \| bottom \| bothbottom[nzPaginationType]分页尺寸default \| smalldefault[nzBordered]是否显示所有表格边框booleanfalse✅[nzOuterBordered]是否显示表格外边框booleanfalse[nzWidthConfig]设置列宽不可与th上的[nzWidth]同时使用string[][][nzSize]表格尺寸middle \| small \| defaultdefault✅[nzLoading]表格加载状态booleanfalse[nzLoadingIndicator]自定义加载指示器TemplateRefvoid-✅[nzLoadingDelay]加载状态延迟毫秒防止闪烁number0[nzScroll]表格是否可在 x/y 方向滚动x或y为字符串时表示表体宽度/高度object-[nzTitle]表格标题渲染器string \| TemplateRefvoid-[nzFooter]表格底部渲染器string \| TemplateRefvoid-[nzNoResult]自定义无数据内容string \| TemplateRefvoid-[nzPageSizeOptions]每页条数切换器选项number[][10, 20, 30, 40][nzShowQuickJumper]是否允许快速跳页booleanfalse✅[nzShowSizeChanger]是否允许改变nzPageSizebooleanfalse✅[nzShowTotal]显示分页总数与范围同 Pagination 组件TemplateRef{ $implicit: number, range: [ number, number ] }-[nzItemRender]自定义分页项同 Pagination 组件TemplateRef{ $implicit: page \| prev \| next, page: number }-[nzHideOnSinglePage]单页时是否隐藏分页booleanfalse[nzSimple]是否使用简洁分页模式boolean-✅[nzTemplateMode]模板模式无需向nzData传数据booleanfalse[nzVirtualItemSize]列表项尺寸同 cdk itemSizenumber0[nzVirtualMaxBufferPx]渲染新项时的缓冲像素数同 cdk maxBufferPxnumber200[nzVirtualMinBufferPx]视口外最小缓冲像素同 cdk minBufferPxnumber100[nzVirtualForTrackBy]虚拟滚动中用于跟踪变更的 TrackByFunctionTrackByFunctionT-[noDataVirtualHeight]无数据时内部滚动高度string182px(nzPageIndexChange)pageIndex变化回调EventEmitternumber-(nzPageSizeChange)pageSize变化回调EventEmitternumber-(nzCurrentPageDataChange)当前页数据变化回调EventEmitterT[]-(nzCustomColumnChange)表格列重排回调EventEmitterNzCustomColumn[]-(nzQueryParams)服务端分页/排序/筛选时的工作参数回调EventEmitterNzTableQueryParams-关于(nzQueryParams)的结构见 table.types.tsexport interface NzTableQueryParams { pageIndex: number; pageSize: number; sort: Array{ key: string; value: NzTableSortOrder }; filter: Array{ key: string; value: NzTableFilterValue }; }从源码看该参数由 NzTableDataService 组合pageIndex、pageSize与各列的排序/筛选状态生成debounceTime(0)合并抖动只有声明了排序/筛选的列才会出现在sort/filter数组中。th表头单元格Checkbox 属性Property说明类型默认值[nzShowCheckbox]是否在表头显示nz-checkboxboolean-[nzDisabled]是否禁用nz-checkboxboolean-[nzIndeterminate]nz-checkbox半选状态boolean-[nzLabel]nz-checkbox的 ARIA 标签string-[nzChecked]勾选状态双向绑定boolean-(nzCheckedChange)勾选状态变化回调EventEmitterboolean-选择属性SelectionProperty说明类型默认值[nzShowRowSelection]是否显示行选择下拉选项boolean-[nzSelections]选择选项含text与onSelect回调Array{ text: string, onSelect: any }-排序属性SortProperty说明类型默认值[nzShowSort]是否显示排序boolean-[nzSortFn]客户端排序函数参照Array.sort比较函数服务端排序时设为trueNzTableSortFnT \| boolean-[nzSortOrder]排序方向descend \| ascend \| null-[nzSortDirections]支持的排序顺序循环Arraydescend \| ascend \| null[ascend, descend, null](nzSortOrderChange)排序方向变化回调EventEmitterdescend \| ascend \| null-筛选属性FilterProperty说明类型默认值[nzShowFilter]是否显示筛选boolean-[nzFilterFn]客户端筛选函数服务端筛选时设为trueNzTableFilterFnT \| boolean-[nzFilters]筛选选项text显示文本、value回调值、byDefault是否默认启用Array{ text: string; value: any; byDefault?: boolean }-[nzFilterMultiple]是否启用多选筛选booleantrue(nzFilterChange)筛选值变化回调EventEmitterany[] \| any-样式属性StyleProperty说明类型默认值[nzWidth]指定列宽像素分组列时不可用string-[nzLeft]左侧固定像素设为true时自动计算设为false时取消固定string \| boolean-[nzRight]右侧固定像素设为true时自动计算设为false时取消固定string \| boolean-[nzAlign]内容对齐方式left \| right \| center-[nzCellControl]设置列的位置值为NzCustomColumn类型中的value字段string-[nzBreakWord]是否在单词内换行booleanfalse[nzEllipsis]单元格内容省略暂不支持与排序、筛选同用仅在nzTableLayout为fixed时生效booleanfalse其他Property说明类型默认值[nzColumnKey]列 key配合服务端排序与筛选使用string-td单元格Checkbox 属性Property说明类型默认值[nzShowCheckbox]是否添加nz-checkboxboolean-[nzDisabled]是否禁用复选框boolean-[nzIndeterminate]半选状态boolean-[nzLabel]nz-checkbox的 ARIA 标签string-[nzChecked]勾选状态双向绑定boolean-(nzCheckedChange)勾选状态变化回调EventEmitterboolean-[colSpan]单元格横跨的列数numbernull[rowSpan]单元格横跨的行数numbernull展开属性ExpandProperty说明类型默认值[nzShowExpand]是否显示展开图标boolean-[nzExpand]当前展开状态双向绑定boolean-[nzExpandIcon]自定义展开图标TemplateRefvoid-(nzExpandChange)展开状态变化回调EventEmitterboolean-样式属性StyleProperty说明类型默认值[nzLeft]左侧固定像素true自动计算false取消固定string \| boolean-[nzRight]右侧固定像素true自动计算false取消固定string \| boolean-[nzAlign]内容对齐方式left \| right \| center-[nzCellControl]设置列位置值为NzCustomColumn.valuestring-[nzBreakWord]是否在单词内换行booleanfalse[nzEllipsis]单元格内容省略暂不支持与排序、筛选同用仅nzTableLayout为fixed时生效booleanfalse其他属性Property说明类型默认值[nzIndentSize]树形数据的缩进像素number-theadProperty说明类型默认值(nzSortOrderChange)排序变化回调需配合th上的nzColumnKey使用EventEmitter{ key: string, value: descend \| ascend \| null }-trProperty说明类型默认值[nzExpand]当前行是否展开配合td的nzExpand使用boolean-tfootProperty说明类型默认值[nzSummary]汇总内容boolean-[nzFixed]固定汇总行配合nzScroll使用boolean \| top \| bottomfalsenz-filter-trigger自定义筛选面板Property说明类型默认值[nzDropdownMenu]下拉菜单NzDropdownMenuComponent-[nzVisible]下拉菜单是否可见双向绑定boolean-[nzActive]图标激活状态booleanfalse[nzBackdrop]是否附加背景遮罩booleanfalse(nzVisibleChange)可见状态变化回调参数为nzVisibleEventEmitterboolean-高频实战场景服务端分页、排序与筛选Ajax 表格这是企业级应用最常见的模式数据量很大分页/排序/筛选全部由后端完成。要点是把nzFrontPagination设为false、nzSortFn/nzFilterFn设为true并订阅(nzQueryParams)拉取数据。参考仓库 ajax demonz-table #ajaxTable nzShowSizeChanger [nzFrontPagination]false [nzData]listOfData [nzLoading]loading (nzQueryParams)onQueryParamsChange($event) thead tr th nzColumnKeyname [nzSortFn]trueName/th th nzColumnKeyage [nzSortFn]trueAge/th th nzColumnKeyaddress [nzFilterFn]true [nzFilters]filterAddressAddress/th /tr /thead tbody for (data of ajaxTable.data; track data.id) { tr.../tr } /tbody /nz-tableonQueryParamsChange(params: NzTableQueryParams): void { const { pageSize, pageIndex, sort, filter } params; // 组装后端查询参数排序字段、方向、筛选值、pageIndex、pageSize发起 HTTP 请求 this.loadDataFromServer(pageIndex, pageSize, sort, filter); }固定表头与固定列在nz-table上设置[nzScroll]{ x: 1200px, y: 240px }可同时固定表头y 方向并开启横向滚动x 方向对需要固定的列在th/td上设置[nzLeft]120px或[nzRight]120px设为true时组件会按表格宽度自动计算固定偏移量对应 cell-fixed.directive.ts 的实现。参考 fixed-columns demo。展开行Expandable Row在td上设置[nzShowExpand]、[nzExpand]双向绑定并在tr上绑定对应的[nzExpand]即可实现可展开行。树形数据还可以通过[nzIndentSize]控制缩进详见 expand demo 与 expand-children demo。行选择Row Selection在th上设置[nzShowCheckbox]与[nzChecked]双向绑定实现全选在td上设置[nzShowCheckbox]实现行勾选配合[nzSelections]如全选所有行清空等选项与(nzCheckedChange)回调完成批量操作。参考 row-selection-and-operation demo。虚拟滚动Virtual Scroll对超大数据集如数万行使用虚拟滚动给nz-table设置[nzScroll]与[nzVirtualItemSize]等参数并让表体使用*nzVirtualScroll指令与ng-template组合渲染模板类型为TemplateRef{ $implicit: T, index: number }nz-table #virtualTable [nzData]listOfData [nzVirtualItemSize]54 [nzVirtualMaxBufferPx]200 [nzVirtualMinBufferPx]100 [nzScroll]{ x: 1200px, y: 240px } thead.../thead tbody ng-template nz-virtual-scroll let-data let-indexindex tr.../tr /ng-template /tbody /nz-table相关实现位于 table-virtual-scroll.directive.ts底层复用 Angular CDK 的CdkVirtualScrollViewport见 table.component.ts 的引入完整示例见 virtual demo。模板模式Template Mode与表格标题/底部当你不希望组件处理数据、只想使用增强指令时设置nzTemplateMode此时无需传入nzData参考 template demo。[nzTitle]、[nzFooter]可传入字符串或TemplateRef自定义标题与底部区域对应 title-footer.component.ts汇总行使用tfoot的[nzSummary]与[nzFixed]参考 summary demo。自定义列Custom Column通过[nzCustomColumn]customColumn传入NzCustomColumn[]可以控制列的显示/隐藏与拖拽排序配合(nzCustomColumnChange)在重排后拿到新顺序启用后nzWidthConfig与th的[nzWidth]将不再生效。类型定义见 table.types.tsexport interface NzCustomColumn { value: string; // 对应 th 上的 nzCellControl 值 default: boolean; // 默认是否显示 width: number; // 列宽 fixWidth?: boolean; }参考 custom-column demo。源码实现速览一个 nz-table 由什么组成组件整体位于 components/table/src目录结构即功能边界table/table.component.ts容器组件负责在nz-spin中组织标题、表体、分页根据nzScroll是否设置选择nz-table-inner-scroll滚动/虚拟滚动或nz-table-inner-default普通布局渲染。table-data.service.ts数据管线服务负责分页、排序、筛选与(nzQueryParams)的响应式推导。table-style.service.ts样式/尺寸/列宽测量服务配合NzResizeObserver自动测量列宽。cellth/td增强指令包括固定列 cell-fixed.directive.ts、自定义列 custom-column.directive.ts 等。addon排序图标 sorters.component.ts、筛选面板 filter.component.ts 与自定义筛选触发器 filter-trigger.component.ts 等附加能力。styled对齐 align.directive.ts、省略 ellipsis.directive.ts、单词换行 word-break.directive.ts 等样式指令。重要注意事项NoteOnPush 与不可变更新为了获得更好的性能NG-ZORRO 的所有组件都运行在 OnPush 变更检测策略下。这意味着直接修改Input()传入数组/对象的内部结构不会触发变更检测必须用不可变immutable的方式替换数组或对象引用// 新增数据用展开运算符创建新数组 this.dataSet [ ...this.dataSet, { key: ${this.i}, name: Edward King ${this.i}, age: 32, address: London, Park Lane no. ${this.i} } ]; // 删除数据用 filter 生成新数组 this.dataSet this.dataSet.filter(d d.key ! i);推荐配合 immer 使用以更愉悦地编写不可变更新逻辑例如produce(this.dataSet, draft { ... })。这一约束同样适用于[nzData]、[nzFilters]、[nzCustomColumn]等所有输入任何需要反映到界面上的更新都应产生新的引用。小结nz-table以标准table语义为基础通过指令增强与数据服务管线把分页、排序、筛选、固定列、树形展开、自定义列、虚拟滚动等能力统一收敛到一个组件中客户端场景nzFrontPagination默认truenzSortFn/nzFilterFn数据全部由 NzTableDataService 在本地处理服务端场景nzFrontPaginationfalsenzTotalnzSortFn/nzFilterFn设为true通过(nzQueryParams)接收pageIndex/pageSize/sort/filter并自行请求数据性能注意组件基于 OnPush数据更新务必使用不可变方式超大列表可使用虚拟滚动与track优化。仓库中还提供了 28 个覆盖各场景的 示例demos基础、分页、排序筛选、固定列、分组列、汇总、虚拟滚动、自定义列等每个示例都包含可直接运行的组件代码与对应说明文档是学习与复用的最佳素材。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐SeaTunnel Redis Sink 连接器完全指南单机/集群写入、自定义 Key、多表与 Schema 演进实战SeaTunnel Redis Sink 连接器完全指南单机/集群写入、自定义 Key、多表与 Schema 演进实战 本文以 docs/en/connectUI组件前端NG-ZORRO Table 组件完全指南从基础渲染到服务端分页的源码级实战NG ZORRO Table 组件完全指南从基础渲染到服务端分页的源码级实战 导读 Table表格是 NG ZORRO 中用于展示行列结构化数据的核心组件UI组件前端BootstrapVue表格组件完全手册排序、筛选与虚拟滚动终极指南BootstrapVue表格组件完全手册排序、筛选与虚拟滚动终极指南 BootstrapVue表格组件是构建现代Web应用数据展示的强大工具它基于Vue.j前端UI组件上一篇用geeks-diary构建个人编程知识库从零散笔记到系统知识体系下一篇【handy-ollama】开源下载和安装教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考