您现在的位置是:网站首页> 编程资料编程资料
vue项目中如何添加枚举_vue.js_
2023-05-24
864人已围观
简介 vue项目中如何添加枚举_vue.js_
vue项目添加枚举
添加文件,文件名为enum.js
文件内容:
//使用方法 /** * 获取枚举值:STATUSMAP.SH * 获取枚举描述:STATUSMAP.getDesc('SH') * 通过枚举值获取描述:STATUSMAP.getDescFromValue('TG') */ let STATUSMAP = createEnum({ SH: [0, '审核中'], TG: [1, '审核通过'], }); function createEnum(definition) { const valueMap = {}; const descMap = {}; for (const key of Object.keys(definition)) { const [value, desc] = definition[key]; valueMap[key] = value; descMap[value] = desc; } return { ...valueMap, getDesc(key) { return (definition[key] && definition[key][1]) || '无'; }, getDescFromValue(value) { return descMap[value] || '无'; } } } export default STATUSMAP; 在vue文件中引用
import STATUSMAP from "@/enum";
使用方法
在js中使用
//获取枚举值: STATUSMAP.SH //获取枚举描述: STATUSMAP.getDesc(‘SH') //通过枚举值获取描述: STATUSMAP.getDescFromValue(‘TG')
vue中枚举的使用
涉及的场景:根据后端返回的字段匹配相应的文字,进行页面展示
1. 建一个js文件如:common.js
const enums = { // 角色 roles: { ADMINISTRATOR: '管理人员', LEADER: '队长' } } export { enums }2. 在页面直接引入
html:
{{ (pageNum - 1) * pageSize + scope.$index + 1 }} {{ enums.roles[scope.row.roles] }}
js:
import { enums } from '@/utils/common' data() { return { enums: enums } }以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
相关内容
- vue对枚举值转换方式_vue.js_
- vue代理模式解决跨域详解_vue.js_
- vue3+three.js实现疫情可视化功能_vue.js_
- 使用vxe-table合并单元格后增加选中效果_vue.js_
- JS实现单例模式的N种方案_javascript技巧_
- 如何去掉ElementUI Table的hover变色问题_vue.js_
- 一文带你玩转JavaScript的箭头函数_javascript技巧_
- vxe-table如何在单元格中渲染简单的饼图_vue.js_
- vue嵌入本地iframe文件并获取某元素的值方式_vue.js_
- Node.js 中的 module.exports 与 exports区别介绍_node.js_
