vue项目添加枚举
loyd3 人气:0vue项目添加枚举
添加文件,文件名为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:
<div class="table-detail"> <el-table v-loading="loading" :data="list" height="222"> <el-table-column label="序号" type="index"> <template slot-scope="scope"> {{ (pageNum - 1) * pageSize + scope.$index + 1 }} </template> </el-table-column> <el-table-column label="人员分工"> <template slot-scope="scope"> {{ enums.roles[scope.row.roles] }} </template> </el-table-column> </el-table> </div>
js:
import { enums } from '@/utils/common' data() { return { enums: enums } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容