网站开发公司取名,罗湖田贝社区网站建设,做电脑回收什么网站好,wordpress 生成缩略图TS Vue3 elementUI 表格列表中如何方便的标识不同类型的内容#xff0c;颜色区分 enum 本文内容为 TypeScript 一、基础知识
在展示列表的时候#xff0c;列表中的某个数据可能是一个类别#xff0c;比如#xff1a;
enum EnumOrderStatus{未受理 1,…TS Vue3 elementUI 表格列表中如何方便的标识不同类型的内容颜色区分 enum 本文内容为 TypeScript 一、基础知识
在展示列表的时候列表中的某个数据可能是一个类别比如
enum EnumOrderStatus{未受理 1,处理中,处理完成待评价,处理完成关闭,取消,流转中,
}enum 在定义第一个数值之后后面的会自动增长
二、需求
我需要在列表展示的时候给它标记不同的颜色对应 element 中 el-text 或 el-tag 中的颜色
infowarningsuccessdangerprimary
后台返回的数据大体为
const list [{id: 1, type: 2, title: , content: },{id: 2, type: 1, title: , content: },{id: 3, type: 3, title: , content: },
]三、实现
1. 获取对应 Type 文字描述
首先通过 Enum 可以很方便的获取到对应类别的文字描述
EnumOrderStatus[item.type]
// type 1 时显示为 未受理2. 定义对应类型的 class
我们需要提前给这些类型指定不同的 class也就是 element 中的 type 名。 这里最好用的是 Map()给每个 Enum 值匹配上对应的值如下
enum EnumOrderStatus{未受理 1,处理中,处理完成待评价,处理完成关闭,取消,流转中,
}const ClassNameMapEnumOrderStatus new Map([[EnumOrderStatus[未受理], warning],[EnumOrderStatus[处理中], primary],[EnumOrderStatus[处理完成待评价], success],[EnumOrderStatus[处理完成关闭], success],[EnumOrderStatus[取消], info],[EnumOrderStatus[流转中], primary],
])export {ClassNameMapEnumOrderStatus,EnumOrderStatus
}3. 实现不同颜色显示类别
有了上面这些数据在列表显示的时候就可以直接获取到 名字 和 对应的 type。
el-table-column propstatus label状态 width150 template #defaultscopeel-text :typeClassNameMapEnumOrderStatus.get(scope.row.status){{EnumOrderStatus[scope.row.status]}}/el-text/template
/el-table-column四、结果 五、为什么不直接用 Map()
其实看上面的操作直接用 Map 好像更方便但其实这里 Enum 有个独特的优势就是在定义对象 interface 的时候可能直接使用 Enum 定义其类型。
如
