VUE使用枚举写法

性别单选框 普通基础写法

 为了使我们的代码看起来更规范高级 我们使用枚举动态来写

1.首先定义枚举

2.定义util.js文件

/**
 * 枚举定义工具
 * 示例：
 * const STATUS = createEnum({
 *     ACTIVE: [1, 'active'],
 *     INACTIVE: [2, 'inactive']
 * })
 * 通过枚举值列表：STATUS.list
 * 获取枚举值：STATUS.ACTIVE
 * 获取枚举描述：STATUS.getDesc('ACTIVE')
 * 通过枚举值获取描述：STATUS.getDescFromValue(STATUS.INACTIVE)
 */
export default function createEnum(definition) {
  const strToValueMap = {}
  const numToDescMap = {}
  const list = []
  for (const enumName of Object.keys(definition)) {
    const [value, desc] = definition[enumName]
    strToValueMap[enumName] = value
    numToDescMap[value] = desc
    list.push({ label: desc, value })
  }

  return Object.freeze({
    list,
    ...strToValueMap,
    getDesc(enumName) {
      return (definition[enumName] && definition[enumName][1]) || ''
    },
    getDescFromValue(value) {
      return numToDescMap[value] || ''
    },
  })
}

2.在需要的页面引入 定义的枚举

3.循环使用 动态绑定value值

 4.实现效果