UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本文以 ng-zorro-antd 官方演示Dynamic Settings动态控制表格属性为核心完整拆解其表单配置面板 响应式表格渲染的实现方案。演示位于 components/table/demo/dynamic-settings.md说明文档与 components/table/demo/dynamic-settings.ts源码实现读者读完可以掌握如何通过ReactiveFormsModule的FormGroup与 Angular signals 驱动nz-table的十余个输入属性在运行期实时切换边框、分页、固定列、表头、加载态、尺寸等配置并独立复刻出这一配置组合预览器。一、演示主题选择不同配置组合查看效果官方对该演示的定位非常精炼中文说明为选择不同配置组合查看效果英文为Select different settings to see the result。虽然说明只有一句话但其背后的实现承载了nz-table绝大多数可动态调节的属性外观类bordered边框、size表格尺寸、loading加载态结构类title标题、header列头、footer表尾、expandable展开行数据类pagination前端分页开关、sizeChanger每页条数切换器、simple简单分页、position分页位置、paginationType分页尺寸交互类checkbox行多选、ellipsis单元格省略、fixHeader固定表头、tableScroll横向/固定滚动与固定列。整个演示可以看作一个表格属性实验台左侧上方是一排开关与单选组右侧下方是实时响应这些设置的表格。下面从源码逐层还原其实现。二、配置面板的骨架Setting 接口与表单初始化演示把所有可配置项收敛进一个强类型接口Setting定义见 components/table/demo/dynamic-settings.tstype TableScroll unset | scroll | fixed; interface Setting { bordered: boolean; loading: boolean; pagination: boolean; sizeChanger: boolean; title: boolean; header: boolean; footer: boolean; expandable: boolean; checkbox: boolean; fixHeader: boolean; noResult: boolean; ellipsis: boolean; simple: boolean; size: NzTableSize; tableScroll: TableScroll; tableLayout: NzTableLayout; position: NzTablePaginationPosition; paginationType: NzTablePaginationType; }这些枚举类型全部来自组件自身的类型定义 components/table/src/table.types.tsexport type NzTableLayout fixed | auto; export type NzTablePaginationPosition top | bottom | both; export type NzTablePaginationType default | small; export type NzTableSize middle | default | small;也就是说表格尺寸只有middle / default / small三种分页位置可选top / bottom / both分页类型仅default / small表格布局仅fixed / auto。配置面板中Size、Pagination Position、Pagination Type、Table Layout四组单选的可选值正是这些类型的字面量全集。表单通过NonNullableFormBuilder构造并为每个控件给出演示用的默认值源码第 155-174 行readonly settingForm: FormGroup{ [K in keyof Setting]: FormControlSetting[K] } this.formBuilder.group({ bordered: [false], loading: [false], pagination: [true], sizeChanger: [false], title: [true], header: [true], footer: [true], expandable: [true], checkbox: [true], fixHeader: [false], noResult: [false], ellipsis: [false], simple: [false], size: small as NzTableSize, paginationType: default as NzTablePaginationType, tableScroll: unset as TableScroll, tableLayout: auto as NzTableLayout, position: bottom as NzTablePaginationPosition });三、面板 UI开关组与单选组的声明式渲染面板模板使用for循环统一渲染两组控件源码第 54-77 行listOfSwitch13 个nz-switch每个开关绑定一个布尔型formControlName例如Bordered、Loading、Pagination、PageSizeChanger、Title、Column Header、Footer、Expandable、Checkbox、Fixed Header、No Result、Ellipsis、Simple PaginationlistOfRadio5 组nz-radio-group按钮样式nz-radio-button对应Size、Table Scroll、Table Layout、Pagination Position、Pagination Type。form nz-form nzLayoutinline [formGroup]settingForm for (item of listOfSwitch; track item) { nz-form-item nz-form-label{{ item.name }}/nz-form-label nz-form-control nz-switch [formControlName]item.formControlName / /nz-form-control /nz-form-item } for (radio of listOfRadio; track radio) { nz-form-item nz-form-label{{ radio.name }}/nz-form-label nz-form-control nz-radio-group [formControlName]radio.formControlName for (o of radio.listOfOption; track o) { label nz-radio-button [nzValue]o.value{{ o.label }}/label } /nz-radio-group /nz-form-control /nz-form-item } /form这种配置元数据数组的做法把 13 个开关、5 组单选收敛成两份纯数据模板零重复新增配置项只需往数组里加一条记录——这是本演示最值得借鉴的工程模式。四、表格模板nz-table 输入属性与单元格增强语法表格部分源码第 78-143 行把settingForm的当前值经settingValue()signal 逐项绑定到nz-tablenz-table #dynamicTable [nzScroll]{ x: scrollX(), y: scrollY() } [nzData]listOfData() [nzTableLayout]settingValue().tableLayout [nzBordered]settingValue().bordered [nzSimple]settingValue().simple [nzLoading]settingValue().loading [nzPaginationType]settingValue().paginationType [nzPaginationPosition]settingValue().position [nzShowSizeChanger]settingValue().sizeChanger [nzFrontPagination]settingValue().pagination [nzShowPagination]settingValue().pagination [nzFooter]settingValue().footer ? Here is Footer : null [nzTitle]settingValue().title ? Here is Title : null [nzSize]settingValue().size (nzCurrentPageDataChange)currentPageDataChange($event) 各输入属性在官方 API 文档 components/table/doc/index.zh-CN.md 与 components/table/doc/index.en-US.md 中有完整定义与本演示的对应关系如下演示控件nz-table 属性类型默认值说明Bordered[nzBordered]booleanfalse是否展示外边框和列边框Loading[nzLoading]booleanfalse页面是否加载中可配nzLoadingDelay防闪烁Pagination[nzFrontPagination]/[nzShowPagination]booleantrue/true是否前端分页、是否显示分页器PageSizeChanger[nzShowSizeChanger]booleanfalse是否可以改变nzPageSize选项默认[10, 20, 30, 40]Title[nzTitle]string \| TemplateRefvoid-表格标题Footer[nzFooter]string \| TemplateRefvoid-表格尾部Fixed Header[nzScroll].yobject-纵向滚动即固定表头No Result[nzData]置空T[]-无数据时展示空状态Ellipsis[nzEllipsis]th/tdbooleanfalse单元格内容省略仅在nzTableLayout fixed时生效Simple Pagination[nzSimple]boolean-简单分页Size[nzSize]middle \| small \| defaultdefault表格尺寸Table Layout[nzTableLayout]fixed \| autoauto表格布局fixed是nzEllipsis生效的前提Pagination Position[nzPaginationPosition]top \| bottom \| bothbottom分页显示位置Pagination Type[nzPaginationType]default \| smalldefault分页尺寸注意[nzTitle]与[nzFooter]的写法settingValue().title ? Here is Title : null即传入null时关闭对应区域传入字符串时渲染文本二者也支持TemplateRef自定义复杂内容。单元格层面用到了三组增强指令演示第 96-142 行固定列[nzLeft]fixedColumn()左侧固定列与[nzRight]fixedColumn()右侧固定 Action 列fixedColumn()为boolean时由组件自动计算像素宽度展开行td [(nzExpand)]data.expand双向绑定展开状态配合tr [nzExpand]data.expand渲染展开内容行多选表头[nzChecked]allChecked()、[nzIndeterminate]indeterminate()与(nzCheckedChange)checkAll($event)行单元格[(nzChecked)]data.checked双向绑定。五、数据与选择状态管理signals 当前页数据回填演示用 Angular 16 的 signal 承载全部运行期状态源码第 175-182 行readonly listOfData signalreadonly ItemData[]([]); // 全量数据 readonly displayData signalreadonly ItemData[]([]); // 当前页数据 readonly allChecked signal(false); // 表头全选状态 readonly indeterminate signal(false); // 半选状态 readonly fixedColumn signal(false); // 是否固定首尾列 readonly scrollX signalstring | null(null); // 横向滚动宽度 readonly scrollY signalstring | null(null); // 纵向滚动高度 readonly settingValue signal(this.settingForm.value as Setting); // 配置快照关键联动是(nzCurrentPageDataChange)事件表格当前页数据变化时写回displayData并刷新勾选状态源码第 244-255 行currentPageDataChange($event: readonly ItemData[]): void { this.displayData.set($event); this.refreshStatus(); } refreshStatus(): void { const validData this.displayData().filter(value !value.disabled); const allChecked validData.length 0 validData.every(value value.checked); const allUnChecked validData.every(value !value.checked); this.allChecked.set(allChecked); this.indeterminate.set(!allChecked !allUnChecked); }全选/取消全选只作用于当前页displayData并跳过disabled行这是分页表格多选的正确姿势——避免跨页误操作indeterminate半选状态在部分选中且部分未选时为truecheckAll(value: boolean): void { this.displayData().forEach(data { if (!data.disabled) { data.checked value; } }); this.refreshStatus(); }测试数据由generateData()生成 100 条记录源码第 266-280 行字段覆盖演示所需checked勾选、expand展开、description展开内容、age/address普通单元格Address 用于验证nzEllipsis省略效果。六、联动订阅tableScroll、fixHeader 与 noResult 的副作用演示最具动态精髓的是三个valueChanges订阅源码第 282-301 行它们把表单控件的变化翻译成表格的具体行为ngOnInit(): void { // 1. 全量配置快照任何表单变化都刷新 settingValue this.settingForm.valueChanges.subscribe(value { this.settingValue.set(value as Setting); }); // 2. Table Scroll 三态联动unset / scroll / fixed this.settingForm.controls.tableScroll.valueChanges.subscribe(scroll { this.fixedColumn.set(scroll fixed); // fixed 时固定左右列 this.scrollX.set(scroll scroll || scroll fixed ? 100vw : null); // 横向滚动 }); // 3. Fixed Header开启后给表格纵向滚动高度 240px即固定表头 this.settingForm.controls.fixHeader.valueChanges.subscribe(fixed { this.scrollY.set(fixed ? 240px : null); }); // 4. No Result清空/恢复数据以演示空状态 this.settingForm.controls.noResult.valueChanges.subscribe(empty { if (empty) { this.listOfData.set([]); } else { this.listOfData.set(this.generateData()); } }); this.listOfData.set(this.generateData()); }其中第 2 处值得展开Table Scroll单选有Unset / Scroll / Fixed三档——scroll仅开启横向滚动nzScroll.x 100vwfixed在横向滚动基础上再通过[nzLeft]/[nzRight]固定 Name 列与 Action 列形成横向滚动 首尾固定列的经典复杂表格布局而nzScroll.y 240px固定表头则被独立成Fixed Header开关二者互不干扰、可自由组合。另外注意settingForm的泛型写法FormGroup{ [K in keyof Setting]: FormControlSetting[K] }——它利用映射类型让每个控件的类型与Setting字段严格对齐是 TypeScript 强类型表单的模板级示范NonNullableFormBuilder保证默认值非空。七、性能与变更检测提示官方文档 components/table/doc/index.en-US.md 的 Note 一节专门提醒NG-ZORRO 组件全部运行在 OnPush 变更检测策略下直接修改传入Input()的数组/对象不会触发视图更新应使用不可变方式更新数据演示中正是依赖signal.set()与for ... track data.id保证引用变更可被检测// 新增数据使用展开运算符生成新数组 this.dataSet [...this.dataSet, newItem]; // 删除数据使用 filter 生成新数组 this.dataSet this.dataSet.filter(d d.key ! key);八、如何在本仓库中复现与继续研究演示说明查看 components/table/demo/dynamic-settings.md完整实现阅读 components/table/demo/dynamic-settings.ts其中组件依赖ReactiveFormsModule、NzFormModule、NzRadioModule、NzSwitchModule、NzDividerModule与NzTableModule引入这些模块后即可在任意页面复刻类型定义NzTableSize、NzTableLayout、NzTablePaginationPosition、NzTablePaginationType等枚举见 components/table/src/table.types.tsAPI 全表nz-table、th、td、thead、tr、tfoot的全部输入输出属性见 components/table/doc/index.zh-CN.md 与 components/table/doc/index.en-US.md组件核心实现nz-table主体位于components/table/src/table/目录含table.component.ts、table-inner-default.component.ts等table-data.service.ts负责分页/排序/筛选的数据加工管线是理解前端分页nzFrontPagination底层机制的最佳入口。小结Dynamic Settings演示虽小却是理解nz-table输入属性的活字典一份Setting接口、一份表单、两份配置元数据数组、四条valueChanges订阅就串起了边框、加载、分页、尺寸、布局、滚动、固定列/表头、展开行、多选、省略、空状态等几乎全部核心能力。把它的配置元数据 强类型表单 signal 快照模式迁移到自己的业务中即可低成本打造表格设置中心或调试面板快速验证任意属性组合下的表现。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Table 可控排序与筛选用 [nzSortOrder] / [nzFilters] 编程式控制表格状态ng zorro antd Table 可控排序与筛选用 nzSortOrder / nzFilters 编程式控制表格状态 本篇指南聚焦 ng zorroUI组件前端ant-design Table 动态配置实战基于 Dynamic Settings 示例实现可交互的表格属性控制面板ant design Table 动态配置实战基于 Dynamic Settings 示例实现可交互的表格属性控制面板 导读 本文以 ant design 仓前端UI组件设计系统ng-zorro-antd 表格嵌套子表格Nested Table实战指南用 nzExpand 展开行展示每行详情ng zorro antd 表格嵌套子表格Nested Table实战指南用 nzExpand 展开行展示每行详情 嵌套子表格Nested tablesUI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考