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/ 选择器。
性能优化：大数据量时，建议使用虚拟滚动或分页加载。
若文章对你有帮助，点赞、收藏加关注吧！
