VUE项目中如何遍历枚举，使用枚举与其它值进行比较

声明枚举，循环打印

enum roles {
    '超级管理员',
    '管理员',
    '普通用户'
}

for (const key in roles) {
    console.log(roles[key]);

}

打印结果

 

v-for指令遍历枚举

以select选择器为例，使用isNaN过滤掉number类型的key，到这里，基本效果就实现了

<el-select v-model="userForm.role" style="width: 240px">
    <template v-for="key in roles" :key="key">
         <el-option v-if="isNaN(key)" :label="key" :value="roles[key]" />
    </template>
</el-select>

使用枚举与其它值进行比较（此比较似乎是无意的，因为类型“string”和“number”没有重叠）

如果要进行条件渲染，超级管理员不允许显示，按照循环渲染对象数组的逻辑，role[key] !== 0就搞定了，我们先来尝试一下

视图层确实实现了我们想要的效果，但是编辑器会有报错，因为类型不匹配，简单分析一下,

roles[key] 数据类型可能是string或者number，但是我们过滤了number类型的key值，这时候的roles[key]只能是number类型的数据，但是ts不知道， 所以不能直接roles[key] as number, 要使用unknown做一次中转 roles[key] as unknown as number

修改后，编辑器警告消失

 <el-select v-model="userForm.role" style="width: 240px">
     <template v-for="key in roles" :key="key">
          <el-option v-if="isNaN(key) && roles[key] as unknown as number !=0" :label="key"
               :value="roles[key]" />
      </template>
</el-select>

具体错误原因请参考https://geek-docs.com/typescript/typescript-questions/116_typescript_comparing_value_to_enum_isnt_obvious_in_typescript.html

本篇文章到这里就结束了，感谢阅读