ElementUi的Dropdown下拉菜单的详细介绍及使用

Dropdown是 ElementUI 中用于创建下拉菜单项的一个组件，通常el-dropdown-item 包裹在 el-dropdown 组件中使用。以下从功能特性(一些属性及方法)、使用和高级功能(高亮显示，滚动，额外传参数)三个方面进行详细介绍。

一、功能特性

1.触发方式多样

支持 click（点击触发）和 hover（悬停触发）两种方式。

2.命令值传递

通过 command 属性为菜单项设置唯一标识，点击时触发 command 事件并传递该值，便于区分不同选项。

3.动态控制显示

使用 visible-change 事件监听下拉菜单的显示/隐藏状态变化。

通过 visible 属性（需配合 ref）或 showPopper 属性（需配合 el-dropdown-menu 的 ref）手动控制下拉菜单的显示与隐藏。

4.样式与交互优化

支持图标、分割线、禁用状态等样式配置。常用属性：icon: 图标类名，设置菜单项的图标；divided: 是否在菜单项上方显示分割线；disabled: 是否禁用该菜单项。

可通过 hide-on-click 属性控制点击菜单项后是否自动关闭下拉菜单。

二、使用方法

1. 基础用法

<template><el-dropdown @command="handleCommand"><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="a">选项1</el-dropdown-item><el-dropdown-item command="b" divided>选项2</el-dropdown-item><el-dropdown-item command="c" icon="el-icon-check">选项3</el-dropdown-item><el-dropdown-item command="d" disabled>禁用选项</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template><script>
export default {methods: {handleCommand(command) {console.log('点击了菜单项:', command);// 根据 command 执行不同操作if(command=="a"){// ...},if(command=="b"){},// ...}}
}
</script>

2.动态数据绑定

<template><el-dropdown @command="handleCommand"><span class="el-dropdown-link">{{ selectedOption || '请选择' }}<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item v-for="item in options" :key="item.value" :command="item.value">{{ item.label }}</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template><script>
export default {data() {return {selectedOption: '',options: [{ label: '选项A', value: 'a' },{ label: '选项B', value: 'b' },{ label: '选项C', value: 'c' }]}},methods: {handleCommand(command) {this.selectedOption = this.options.find(item => item.value === command).label;}}
}
</script>

3. 自定义内容

<el-dropdown-menu slot="dropdown"><el-dropdown-item><i class="el-icon-upload"></i><span>上传文件</span></el-dropdown-item><el-dropdown-item><el-badge :value="12" class="item"><i class="el-icon-message"></i><span>消息</span></el-badge></el-dropdown-item>
</el-dropdown-menu>

三、高级功能

1.当前项高亮

通过动态绑定 class 和 selectedCommand 变量实现

<template><el-dropdown @command="handleCommand"><span class="el-dropdown-link">高亮示例</span><el-dropdown-menu slot="dropdown"><el-dropdown-item v-for="item in options" :key="item.value" :command="item.value":class="{ 'highlight': selectedCommand === item.value }">{{ item.label }}</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template><script>
export default {data() {return {selectedCommand: '',options: [{ label: '选项1', value: 'a' },{ label: '选项2', value: 'b' },{ label: '选项3', value: 'c' }]}},methods: {handleCommand(command) {this.selectedCommand = command;}}
}
</script><style>
.highlight {background-color: #f0f0f0;color: #409EFF;
}
</style>

2.智能滚动定位

当菜单项过多时，可通过 ref 和 this.$nextTick 实现滚动到指定项

<template><el-dropdown ref="dropdownRef" @visible-change="handleVisibleChange"@command="handleCommand"><span class="el-dropdown-link">滚动示例</span><el-dropdown-menu ref="dropdownMenuRef" slot="dropdown"><el-dropdown-item v-for="item in largeOptions" :key="item.value" :command="item.value">{{ item.label }}</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template><script>
export default {data() {return {selectedCommand: 'a', // 默认选中第一项largeOptions: Array.from({ length: 20 }, (_, i) => ({label: `选项${i + 1}`,value: String.fromCharCode(97 + i) // a, b, c, ...}))}},methods: {handleCommand(command) {this.selectedCommand = command;},handleVisibleChange(isVisible) {if (isVisible) {this.$nextTick(() => {const dropdownMenu = this.$refs.dropdownMenuRef.$el;const highlightedItem = dropdownMenu.querySelector('.highlight');if (highlightedItem) {highlightedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });}});}}}
}
</script><style>
.highlight {background-color: #f0f0f0;color: #409EFF;
}
</style>

3.传递额外参数

通过对象传递 command 值，结合解构赋值处理

<template><el-dropdown @command="handleCommand"><span class="el-dropdown-link">额外参数示例</span><el-dropdown-menu slot="dropdown"><el-dropdown-item v-for="item in opBtns" :key="item.value" :command="{ command: item.value, row: { id: 1, name: '示例' } }">{{ item.text }}</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template><script>
export default {data() {return {opBtns: [{ value: 'edit', text: '编辑' },{ value: 'delete', text: '删除' }]}},methods: {handleCommand({ command, row }) {console.log('操作类型:', command);console.log('行数据:', row);}}
}
</script>

注意：

属性绑定语法：command 属性必须使用 v-bind（简写为 :）绑定，否则无法解析变量。

触发方式限制：trigger 属性不能使用 v-bind 绑定，否则会报错。

样式覆盖：若需深度自定义样式，可使用 ::v-deep 或 /deep/ 选择器。

性能优化：大数据量时，建议使用虚拟滚动或分页加载。
 若文章对你有帮助，点赞、收藏加关注吧！