ng-alain中ST组件Yn格式支持点击切换状态的技术实现

2025-06-12 00:55:33作者：苗圣禹Peter

【ng-alain】打造高效企业级Angular管理界面？看这里！🚀基于Angular与Ant Design的精英级框架，提供响应式布局、国际化、懒加载等强大功能。🎨定制主题，Less预处理器加持，代码组织清晰注释详尽，升级简便。 duyidu.com 整合业务组件，助力快速开发。无论是桌面还是移动端，一网打尽。contri-bute your way to our GitHub，一起塑造更优体验！💖支持Docker部署，架构稳健，面向未来。加入我们，共创不凡！🌟且为开源献份力，捐赠通道已开启，助项目持续发展。让我们携手，用代码点亮效率之光！✨

项目地址：https://gitcode.com/gh_mirrors/nga/ng-alain

在ng-alain框架的ST（Simple Table）组件中，Yn格式是一种常用的布尔值展示方式，通常用于表示"是/否"、"有效/无效"等二元状态。本文将详细介绍如何在ST组件中实现Yn格式的点击切换功能，以及相关的技术实现细节。

Yn格式的基本使用

Yn格式是ST组件中用于展示布尔值的常用格式，它能够将true/false值转换为"是/否"、"Y/N"等更友好的展示形式。基本配置如下：

{
  title: '状态',
  index: 'status',
  type: 'yn',
  yn: {
    truth: true,
    yes: '是',
    no: '否'
  }
}

点击切换功能的需求背景

在实际业务场景中，用户经常需要快速切换某些状态字段的值。例如：

启用/禁用用户账号
标记任务为完成/未完成
切换系统配置项的开关状态

传统做法需要用户进入编辑页面或弹出对话框进行修改，而直接在表格中点击切换则能大幅提升操作效率。

技术实现方案

ng-alain框架提供了两种实现点击切换的方案：

方案一：使用cell渲染结合click事件

最新版本的ng-alain支持通过cell渲染和click事件实现点击切换功能：

{
  title: '可用状态',
  index: 'disabled',
  width: 80,
  cell: { 
    type: 'boolean', 
    tooltip: '点击切换状态' 
  },
  className: 'point',  // 添加指针样式
  click: (record) => {
    this.st.setRow(record, { disabled: !record.disabled });
    // 这里可以添加API调用等业务逻辑
  }
}

方案二：自定义渲染函数

对于需要更复杂交互的场景，可以使用render自定义渲染函数：

{
  title: '状态',
  index: 'status',
  render: 'custom',
  className: 'point',
  click: (record) => {
    this.toggleStatus(record);
  }
}

// 在组件中实现toggleStatus方法
toggleStatus(record: any) {
  const newStatus = !record.status;
  this.service.updateStatus(record.id, newStatus).subscribe(() => {
    this.st.setRow(record, { status: newStatus });
    this.msg.success('状态更新成功');
  });
}