Designing and Using Enums in Frontend Projects with ElementUI

What is Enum? Enum is a data type present in many languages to represent a set of related constant values such as gender, status, alignment, etc. In JavaScript there is no native Enum, but TypeScript provides one; the article proposes a generic wrapper for front‑end projects.

It shows a typical gender example with display text, code, and numeric values, and discusses storage vs UI representation, referencing the Chinese national standard GB/T 2261.1‑2003 for gender codes.

Frontend application scenarios include: (1) displaying user‑friendly text in tables when the backend returns coded values; (2) using ElementUI <el-tag> to show enum text with style; (3) binding enum data as sources for select, radio, and checkbox components.

EnumFactory implementation – a constructor EnumFactory that receives an enum definition object (standard mode {key:{text:'',type:''}} or shorthand {key:'text'}) and an optional key parsing function. It creates read‑only properties keys, values (array of {key,text,type}), and a formatter function for ElementUI tables, then freezes the instance.

/** 
 * Enum creation factory (constructor) that extends the enum object with keys, values, and formatter. 
 * @param {*} enumObj – enum definition, supports standard or simple mode 
 * @param {*} keyParseFunc – optional key conversion function (e.g., parseInt) 
 */ 
export default function EnumFactory(enumObj, keyParseFunc = null) { 
  Object.assign(this, enumObj); 
  Object.defineProperty(this, 'keys', { 
    value: keyParseFunc ? Object.keys(enumObj).map(s => keyParseFunc(s)) : Object.keys(enumObj) 
  }); 
  let values = []; 
  const ovalues = Object.values(enumObj); 
  if (typeof ovalues[0] === 'string') { 
    ovalues.forEach((text, index) => { 
      const obj = { key: this.keys[index], text }; 
      values.push(obj); 
      this[this.keys[index]] = obj; 
    }); 
  } else { 
    ovalues.forEach((item, index) => { 
      item.key = this.keys[index]; 
      values.push(item); 
    }); 
  } 
  Object.defineProperty(this, 'values', { value: values }); 
  Object.defineProperty(this, 'formatter', { 
    value: function(r, c, value) { 
      return values.filter(v => v.key == value || v.text == value)[0]?.text || 'notfound'; 
    } 
  }); 
  Object.freeze(this); 
}

Defining enums with EnumFactory – examples for gender, usage status, and alignment are provided in enums.js. The resulting objects expose keys and values arrays, e.g., enumGender.keys yields [0,1,2] and enumGender.values contains objects with text and type.

Using enums in ElementUI – table columns can use the formatter or inline templates such as {{ enumGender[scope.row.gender]?.text }} with <el-tag :type="enumGender[scope.row.gender]?.type">. Tags can be rendered directly from enumGender.values, and the same values serve as data sources for <el-select>, <el-radio-group>, etc.

Conclusion – designing a standard enum data structure simplifies retrieval of display text and styling, improves UI consistency, and reduces hard‑coding.

References – GB/T 2261.1‑2003 gender code standard, the open‑source project kvue‑admin, and the source file enums.vue.