el-dropdown（下拉菜单）

适用场景

与el-select选择器相似，但是点击选择选项时，选项框可以不收起。

知识点

1. el-dropdown嵌套el-dropdown-menu，el-dropdown-menu嵌套el-dropdown-item使用
2. 下拉可设置成文本+图标，按钮+图标，统一在el-dropdown的标签包裹位置设置
3. 按钮+分割线+图标的设置通过el-dropdown中的split-button和type属性控制，@click事件点击按钮文本触发
4. el-dropdown的trigger默认为hover，可以设置为click
5. el-dropdown的hide-on-click默认为true，即下拉菜单选项被选中后，会自动关闭下拉菜单，设置为false，不会自动关闭
6. size可以控制下拉菜单的大小
7. el-dropdown-menu需要指定slot为dropdown
8. el-dropdown-item设置icon,左侧显示图标
9. el-dropdown-item设置command对应el-dropdown的@command的参数
10. el-dropdown-item设置divided 可以在菜单选项上方显示分割线
11. el-dropdown和el-dropdown-item设置disabled,即不可选中

示例代码

<el-dropdown
      v-if="showRgbImage"
      class="selectImage"
      trigger="click"
      placement = "bottom-start"
      :hide-on-click = "false"
      @command="selectImageChange"
      @visible-change="removeImage">
      <span class="el-dropdown-link" style="display: inline-block;position: relative;width: 100%">
        影像展示<i class="el-icon-arrow-down el-icon--right" style="position: absolute;right: 0px;top: 7px"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item in imageArray" :command="item">
          {
    
    {
    
    item.dateTime.substring(0,4)}}年{
    
    {
    
    item.dateTime.substring(4,6)}}月{
    
    {
    
    item.dateTime.substring(6,8)}}日
        </el-dropdown-item>
      </el-dropdown-menu>
</el-dropdown>

参考连接：el-dropdown(下拉菜单)的入门学习