el-dropdown选中效果

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 里，所以定义的样式无效，需要定义全局样式