目录Vue项目添加枚举在vue文件中引用使用方法vue中枚举的使用1. 建一个js文件如:common.js2. 在页面直接引入vue项目添加枚举 添加文件,文件名为enum.js
添加文件,文件名为enum.js
文件内容:
//使用方法
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;
import STATUSMAP from "@/enum";
在js中使用
//获取枚举值:
STATUSMAP.SH
//获取枚举描述:
STATUSMAP.getDesc(‘SH')
//通过枚举值获取描述:
STATUSMAP.getDescFromValue(‘TG')
涉及的场景:根据后端返回的字段匹配相应的文字,进行页面展示
const enums = {
// 角色
roles: {
ADMINISTRATOR: '管理人员',
LEADER: '队长'
}
}
export {
enums
}
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
}
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue项目中如何添加枚举
本文链接: https://lsjlt.com/news/167462.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0