Element Plus 的 Dropdown 组件用于创建下拉菜单，提供了一种方便的方式来展示和选择菜单项。以下是使用 Element Plus 中的 Dropdown 组件的一些基本示例和代码：

1. 安装 Element Plus：

如果你还没有安装 Element Plus，请参考前面的步骤进行安装。

2. 导入和使用 Dropdown：

在你的 Vue 组件中导入 Dropdown，并在模板中使用它。以下是一个简单的示例：
<template>
  <div>
    <el-dropdown>
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>Action 1</el-dropdown-item>
        <el-dropdown-item>Action 2</el-dropdown-item>
        <el-dropdown-item>Action 3</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';

export default {
  components: {
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
  },
};
</script>

在上述代码中，我们导入了 ElDropdown、ElDropdownMenu 和 ElDropdownItem 组件，并在模板中使用它们来创建一个简单的下拉菜单。

3. 自定义 Dropdown：

你可以根据需要自定义 Dropdown，例如，添加图标、修改触发方式等：
<template>
  <div>
    <el-dropdown trigger="click">
      <i class="el-icon-more"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-edit">编辑</el-dropdown-item>
        <el-dropdown-item icon="el-icon-delete">删除</el-dropdown-item>
        <el-dropdown-item icon="el-icon-info">详情</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';

export default {
  components: {
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
  },
};
</script>

在这个例子中，我们通过在 el-dropdown-item 中使用 icon 属性添加了图标，并通过 trigger 属性指定了触发方式为点击（默认是鼠标悬停）。

这是一个简单的例子，你可以根据实际需求进一步定制 Dropdown 的样式和行为。


转载请注明出处：http://www.pingtaimeng.com/article/detail/5572/ElementPlus