el-select遍历显示枚举类型

使用枚举我们可以定义一些有名字的数字常量。 枚举通过enum关键字来定义。

/**
 * 内存单位枚举
 */
export enum enumMemoryUnitCode {
  'KiB' = 1,
  'MiB' = 2,
  'GiB' = 3,
  'TiB' = 4,
  'PiB' = 5
}

经常会在项目中用吧，循环遍历枚举放到select下拉列表中，发现有这种情况

<el-select
          class="memory-unit"
          v-model="modelModifyMemoryVm.memTotalUnitCode"
          placeholder="请选择"
          @change="changeMemTotalUnitCode"
        >
          <template v-for="(item, index) in enumMemoryUnitCode">
            <el-option :key="item" :label="index" :value="item"> </el-option>
          </template>
        </el-select>

然后渲染出来的列表是下面这种：

image.png

可以看出来，渲染了全部的枚举类型，这跟ts内部定义枚举类型的机制有关系。
为解决这个问题，我选择这样做：

<el-select
          class="memory-unit"
          v-model="memTotalUnitCode"
          placeholder="请选择"
          @change="changeMemTotalUnitCode"
        >
          <template v-for="(item, index) in enumMemoryUnitCode">
            <el-option
              v-if="item < Object.keys(enumMemoryUnitCode).length "
              :key="item"
              :label="index"
              :value="item"
            >
            </el-option>
          </template>
        </el-select>

来看结果～

image.png

撒花～～开心！