vue2版本

<template><el-dropdown size="mini" @command="handleCommand"><span class="el-dropdown-link">{{ selectedOption }}<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown" placement="top-start"><el-dropdown-item v-for="item in options":command="beforeHandleCommand(item.value, item.label)":class="{'is-selected' : selectedValue === item.value}":icon="`${selectedValue === item.value ? 'el-icon-caret-right' : ''}`">{{ item.label }}</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template><script>export default {data() {return {selectedOption: "全部选项",// 选中的值selectedValue: "a",options: [{label: "全部选项",value: "a"},{label: "选项1",value: "b"},{label: "选项2",value: "c"},{label: "选项3",value: "d"}]};},methods: {handleCommand(command) {console.log(command);this.selectedOption = command.label;this.selectedValue = command.value;// TODO 获取值进行下一步操作},            beforeHandleCommand(value, label) {return {'value': value,'label': label}}}}
</script><style lang="scss" scoped>.el-dropdown-link {cursor: pointer;font-size: 12px;}.is-selected {color: #46A6FF; /* 自定义选中项的颜色 */background-color: #E8F4FF; /* 自定义选中项的背景色 */}.el-dropdown-menu .el-dropdown-menu__item {display: flex;align-items: center;justify-content: flex-end;padding: 0 25px 0 10px;}
</style>

vue3版本

<template><el-dropdown size="small" placement="bottom-start" popper-class="dropDownStyle" @command="handleCommand"><span class="el-dropdown-link">{{ selectedOption }}<el-icon class="el-icon--right"><arrow-down /></el-icon></span><template #dropdown><el-dropdown-menu><el-dropdown-item v-for="item in options":command="beforeHandleCommand(item.value, item.label)":class="{'is-selected': selectedValue === item.value}":icon="selectedValue === item.value ? CaretRight : ''">{{ item.label }}</el-dropdown-item></el-dropdown-menu></template></el-dropdown>
</template><script setup>
import {ArrowDown,CaretRight
} from '@element-plus/icons-vue'
const selectedOption = ref("全部选项")
// 选中的值
const selectedValue = ref("a")
// 下拉框数据
const options = [{label: "全部选项",value: "a"},{label: "选项1",value: "b"},{label: "选项2",value: "c"},{label: "选项3",value: "d"}
]
const handleCommand = (command) => {console.log(command);selectedOption.value = command.label;selectedValue.value = command.value;// TODO 获取值进行下一步操作
}
const beforeHandleCommand = (value, label) => {return {'value': value,'label': label}
}
</script><style lang="scss" scoped>
.el-dropdown-link {cursor: pointer;display: flex;align-items: center;font-size: 12px;
}:global(.dropDownStyle .is-selected) {color: #46A6FF; /* 自定义选中项的颜色 */background-color: #E8F4FF; /* 自定义选中项的背景色 */
}:global(.el-dropdown-menu .el-dropdown-menu__item) {display: flex;align-items: center;justify-content: right;padding: 0 20px;}    
</style>

效果

注意事项

vue2和vue3有两个地方区别

• el-dropdown-item里属性icon的写法不同
  • vue2中图标使用了类似 class名称渲染 可以用表达式形式 :icon=“`${selectedValue === item.value ? ‘el-icon-caret-right’ : ‘’}`”
  • vue3中图标直接使用导入的图标名 :icon="selectedValue === item.value ? CaretRight : ''"
  • vue3用vue2的形式不生效
• 样式使用不同
  • vue2直接定义(在项目中使用,不知道是否因为其他而影响)
  • vue3需要用到:global定义全局样式，这样才能生效。浏览器中通过右键-检查，查看源码得知，el-dropdown-item不在 #app 里，所以定义的样式无效，需要定义全局样式