直播平台制作，vue el-dropdown下拉框单选有对钩高亮
<template>
<div>
<div class="selected"></div>
<el-dropdown
style="
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-item
v-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>
以上就是 直播平台制作，vue el-dropdown下拉框单选有对钩高亮，更多内容欢迎关注之后的文章
标签：el,title,default,dropdown,value,单选,type,下拉框 From： https://www.cnblogs.com/yunbaomengnan/p/17373951.html