vue项目中如何添加枚举

目录vue项目添加枚举在vue文件中引用使用方法vue中枚举的使用1.建一个js文件如：common.js2.在页面直接引入vue项目添加枚举添加文件，文件名为enum.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文件如：commandroidon.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">
      php{{ (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
  }
 }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。