SoFunction
Updated on 2025-03-10

How to add enums in vue project

Add enum for vue project

Add file, file name

File content:

//How to use/**
  * Get the enum value:
  * Get enumeration description: ('SH')
  * Get description by enumeration value: ('TG')
  */
let STATUSMAP = createEnum({
  SH: [0, 'Additional'],
  TG: [1, 'Audit passed'],
});
function createEnum(definition) {
  const valueMap = {};
  const descMap = {};
  for (const key of (definition)) {
    const [value, desc] = definition[key];
    valueMap[key] = value;
    descMap[value] = desc;
  }
  return {
    ...valueMap,
    getDesc(key) {
      return (definition[key] && definition[key][1]) || 'none';
    },
    getDescFromValue(value) {
      return descMap[value] || 'none';
    }
  }
}
export default STATUSMAP;

Reference in vue file

import STATUSMAP from "@/enum";

How to use

Use in js

//Get the enum value:
//Get the enumeration description:(‘SH')
//Get description by enumeration values:(‘TG')

Use of enumeration in vue

Scenarios involved: match the corresponding text according to the fields returned by the backend, and display the page

1. Create a js file such as:

const enums = {
// Roleroles: {
    ADMINISTRATOR: 'Manager',
    LEADER: 'team leader'
  }
}
export {
  enums
  }

2. Introduce directly on the page

html：

    <div class="table-detail">
      <el-table v-loading="loading" :data="list" height="222">
        <el-table-column label="Serial Number" type="index">
          <template slot-scope="scope">
            {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="Section of labor">
          <template slot-scope="scope">
            {{ [] }}
          </template>
        </el-table-column>
      </el-table>
    </div>

js：

import { enums } from '@/utils/common'
data() {
    return {
      enums: enums
    }
  }

The above is personal experience. I hope you can give you a reference and I hope you can support me more.