Delon表单组件ST使用教程：3分钟打造专业数据表格

Delon表单组件ST使用教程：3分钟打造专业数据表格

【免费下载链接】delonDelon is a set of essential modules for ng-alain. https://github.com/ng-alain/ng-alain/issues项目地址: https://gitcode.com/gh_mirrors/de/delon

Delon是ng-alain的核心模块集，其中ST组件是基于nz-table开发的高效数据表格解决方案。通过ST组件的可配置特性，开发者能够以极简的代码快速构建功能完善的数据表格，大幅提升中后台系统的开发效率。本文将带您快速掌握ST组件的核心用法，实现专业数据表格的快速开发。

ST组件核心优势与应用场景

ST组件并非从零构建表格，而是在nz-table基础上提供了声明式配置能力，特别适合中后台系统中常见的数据管理场景：

• 快速展示结构化数据列表
• 实现数据的排序、过滤与分页
• 集成行操作按钮与批量处理功能
• 支持响应式布局适配不同设备

从架构设计上，ST组件通过配置化方式降低了表格开发的复杂度。其核心文件位于./packages/abc/st/目录下，主要包括：

• st.component.ts：表格核心实现
• st.interfaces.ts：类型定义
• index.zh-CN.md：完整API文档

快速上手：3步实现基础数据表格

1. 安装与导入模块

首先确保项目中已安装Delon依赖，然后在需要使用表格的模块中导入STModule：

import { STModule } from '@delon/abc/st'; @NgModule({ imports: [STModule] }) export class YourModule { }

2. 定义表格配置

在组件类中定义表格的列配置和数据源：

columns = [ { title: '编号', index: 'id', type: 'no' }, { title: '名称', index: 'name' }, { title: '状态', index: 'status', type: 'badge', badge: { color: 'success' } }, { title: '操作', buttons: [{ text: '编辑' }, { text: '删除' }] } ]; data = [ { id: 1, name: '示例数据1', status: '正常' }, { id: 2, name: '示例数据2', status: '异常' } ];

3. 模板中使用ST组件

在模板中添加st标签并绑定配置：

<st [columns]="columns" [data]="data"></st>

通过以上三步，即可快速创建一个包含序号、状态徽章和操作按钮的基础表格。

高级功能配置指南

数据源配置策略

ST组件支持多种数据源类型，满足不同场景需求：

静态数据

直接绑定数组或Observable：

// 本地数组 data = [{ id: 1, name: '测试' }]; // Observable data = of([{ id: 1, name: '测试' }]);

远程数据

通过URL自动加载：

data = '/api/users'; req = { params: { token: 'xxx' } }; // 额外请求参数 res = { reName: { list: 'data', total: 'count' } }; // 重命名返回字段

列类型与格式化

ST组件提供丰富的列类型，满足不同数据展示需求：

• 基础类型：文本、数字、日期等
• 交互类型：链接、单选框、复选框
• 状态类型：徽章(badge)、标签(tag)、开关(yn)

例如，格式化日期列：

{ title: '创建时间', index: 'createTime', type: 'date', dateFormat: 'yyyy-MM-dd' }

分页与排序

通过简单配置实现分页和排序功能：

<st [columns]="columns" [data]="data" [page]="{ show: true, showSize: true, pageSizes: [10, 20, 50] }" [sort]="{ key: 'name', default: 'ascend' }" ></st>

常见问题与最佳实践

性能优化建议

• 大数据量时启用虚拟滚动：[virtualScroll]="true"
• 延迟加载数据：[req]="{ lazyLoad: true }"
• 合理设置列宽避免水平滚动

避免常见错误

Q: 切换列定义时出现"Cannot read property 'text' of undefined"

A: 使用resetColumns方法重置列定义：

this.st.resetColumns({ columns: newColumns, emitReload: true });

Q: 某列显示"INVALID DATA"

A: 检查列类型与实际数据是否匹配，例如数字列接收了非数字值。

完整API文档

更多高级配置选项，请参考官方文档：./packages/abc/st/index.zh-CN.md

总结

Delon的ST组件通过配置化方式极大简化了数据表格的开发流程，使开发者能够在几分钟内构建出功能完善的专业表格。无论是简单的数据展示还是复杂的交互需求，ST组件都能提供高效的解决方案，是ng-alain生态中不可或缺的核心模块。

通过本文介绍的基础用法和高级配置，您已经掌握了ST组件的核心能力。建议进一步探索其丰富的API，结合实际项目需求，打造更加专业的数据管理界面。

【免费下载链接】delonDelon is a set of essential modules for ng-alain. https://github.com/ng-alain/ng-alain/issues项目地址: https://gitcode.com/gh_mirrors/de/delon