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 のトリガーはデフォルトでホバーですが、クリックするように設定できます。
5. el-dropdown のクリック時非表示はデフォルトで true、つまり、ドロップダウン メニュー オプションが選択された後、ドロップダウン メニューは自動的に閉じられます。false に設定されている場合、ドロップダウン メニューは閉じられません。自動的に
6. size はドロップダウン メニューのサイズを制御できます
7. el-dropdown-menu ではスロットをドロップダウンとして指定する必要があります
8. el-dropdown-item set アイコン、アイコンは左側に表示されます
9. el-dropdown-item は、el-dropdown の @command に対応するコマンドのパラメータを設定します
10. el-dropdown-item 設定を分割すると、メニュー オプションの上に分割線を表示できます
11. el-dropdown と el-dropdown-item は無効に設定されています。つまり、選択できません。

サンプルコード

<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（ドロップダウンメニュー）の入門学習