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

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

一、功能特性

1.触发方式多样

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

2.命令值传递

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

3.动态控制显示

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

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

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.当前项高亮

通过动态绑定 classselectedCommand 变量实现

复制代码
<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.智能滚动定位

当菜单项过多时,可通过 refthis.$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/ 选择器。

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

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

相关推荐
蓝莓味的口香糖几秒前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒几秒前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser2 分钟前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan5 分钟前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family7 分钟前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
FreeBuf_22 分钟前
新型域名前置攻击利用Google Meet、YouTube、Chrome及GCP构建流量隧道
前端·chrome
c0detrend26 分钟前
技术架构设计:如何打造一个高性能的Chrome截图插件
前端·chrome
幽络源小助理32 分钟前
8、幽络源微服务项目实战:前端登录跨域同源策略处理+axios封装+权限的递归查询增删改+鉴权测试
前端·微服务·架构
API开发37 分钟前
apiSQL+GoView:一个API接口开发数据大屏
前端·后端·api·数据可视化·数据大屏·apisql
运维开发王义杰39 分钟前
nodejs:揭秘 npm 脚本参数 -- 的妙用与规范
前端·npm·node.js