vue ts html 中如何遍历 Enum 类型构建页面结构

一、需求

定义了一个 Enum 用来标记菜单类型：

enum EnumMenuType {
    '目录' = 1,
    '菜单',
    '按钮',
    '外链'
}

你得 Enum 知道它的序号是随第一个定义的值自动增长的

现在想在 ElementUI 界面的 radio-group 中遍历它，不遍历的时候是这样使用：

<el-radio-group v-model="formMenu.type" placeholder="类型">
     <el-radio :label="1">目录</el-radio>
     <el-radio :label="2">菜单</el-radio>
     <el-radio :label="3">按钮</el-radio>
     <el-radio :label="4">外链</el-radio>
 </el-radio-group>

二、实现 Enum 遍历值

1. Enum 遍历

你需要知道 Enum 在遍历的时候不光会遍历出对应的 Enum 名，还会遍历出值

for (let key in EnumMenuType){
	console.log(key)
}

// 输出为
1
2
3
4
目录
菜单
按钮
外链

2. 过滤数字值

如果直接使用

<el-radio-group v-model="formMenu.type" placeholder="类型">
    <el-radio v-for="key in EnumMenuType" :key="key" :label="key">
        {{ EnumMenuType[key] }}
    </el-radio>
</el-radio-group>

它会显示成这样：

所以需要过滤一下数字值，这里需要加一层 template 进行循环，再在里面再进行判断

<el-radio-group v-model="formMenu.type" placeholder="类型">
    <template v-for="key in EnumMenuType" :key="key">
        <el-radio v-if="isNaN(EnumMenuType[key])" :label="key">
            {{ EnumMenuType[key] }}
        </el-radio>
    </template>
</el-radio-group>

3. 结果

这样就可以了