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/ 选择器。

性能优化：大数据量时，建议使用虚拟滚动或分页加载。

若文章对你有帮助，点赞、收藏加关注吧！