el-dropdown (drop-down menu)

Applicable scene

Similar to the el-select selector, but when clicking to select an option, the option box does not need to be collapsed.

knowledge points

1. el-dropdown nested el-dropdown-menu, el-dropdown-menu nested el-dropdown-item use
2. The drop-down can be set to text+icon, button+icon, unified in the label wrapping position setting of el-dropdown
3. The button + dividing line + icon setting is controlled by the split-button and type attributes in el-dropdown, and the @click event is triggered by clicking the button text
4. The trigger of el-dropdown defaults to hover and can be set to click
5. The hide-on-click of el-dropdown is true by default, that is, after the drop-down menu option is selected, the drop-down menu will be automatically closed. If it is set to false, it will not be closed automatically
6. size can control the size of the drop-down menu
7. el-dropdown-menu needs to specify slot as dropdown
8. el-dropdown-item set icon, the icon is displayed on the left
9. el-dropdown-item sets the parameters of command corresponding to @command of el-dropdown
10. el-dropdown-item setting divided can display the dividing line above the menu options
11. el-dropdown and el-dropdown-item are set to disabled, that is, they cannot be selected

sample code

<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>

Reference link: Introductory learning of el-dropdown (drop-down menu)