博客

【前端TS】TypeScript 数据类型——枚举 (Enum)实践

  • Post author:
  • Post category:其他




需求：园区访问记录列表中，访问状态显示颜色：审核中、已拒绝、未到访、已到访、已签退、已过期等七种状态样式，效果如图：

在这里插入图片描述



API提供的数据：synthesizeStatus为状态标识。

在这里插入图片描述



实现步骤：后端使用枚举返回，前端亦可使用枚举做样式渲染。



1.配置访问状态对应的颜色样式。


2.TS枚举配置：数字枚举类型。


3.列表渲染时，访问状态绑定对应样式。
//创建枚举
enum visitStatus {
   
    status_other,
    status_none,
    status_agreed,
    status_rejected,
    status_notAccessed,
    status_Accessed,
    status_outOfGarden,
    status_expired,
}

export default visitStatus


枚举enumStatus内容

在这里插入图片描述 

//转换成js
let visitStatus;

(function (visitStatus) {
   
    visitStatus[visitStatus["status_other"] = 0] = "status_other";

    visitStatus[visitStatus["status_none"] = 1] = "status_none";

    visitStatus[visitStatus[


版权声明：本文为qq_44683095原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。