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