vue el-dropdown下拉框单选有对钩高亮

本文主要是介绍vue el-dropdown下拉框单选有对钩高亮，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求：其实是el-table中头部标题有下拉框，且下拉框是单选，选中的item高亮且对号表示；

在这里插入图片描述

代码：

<template><div><div class="selected"></div><el-dropdownstyle="cursor: pointer;font-weight: 500;font-size: 16px;line-height: 1;letter-spacing: 0.09px;color: #202224;":hide-on-click="false"@command="switchStatusKeywords"><span class="el-dropdown-link">扫描进度<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-itemv-for="(item, key) in taskStatusMap":key="key":command="item.value":class="{ selected: status == item.value }"><i v-show="status == item.value" class="el-icon-check"></i>{{ item.title }}</el-dropdown-item></el-dropdown-menu></el-dropdown></div>
</template><script>
export default {data() {return {status: "",taskStatusMap: [{ value: "0", type: "default", title: "未开始" },{ value: "1", type: "default", title: "队列中" },{ value: "2", type: "default", title: "进行中" },{ value: "3", type: "default", title: "已成功" },{ value: "4", type: "disabled", title: "不可用" },{ value: "5", type: "disabled", title: "部分信息丢失" },{ value: "6", type: "default", title: "暂停" },],};},methods: {switchStatusKeywords(index) {console.log("index", index);this.status = index;},},
};
</script><style scoped >
.selected {color: #409eff;
}
.el-dropdown-menu__item {padding-left: 40px;
}
.el-dropdown-menu__item i {margin-left: -24px;color: #409eff;
}
</style>