一、問題描述

在使用el-dropdown實現二級選單時，當點選二級選單項時一級選單列表會消失，這與需求相違背了！！

二、解決方案

利用dom操作來控制選單列表的顯示與隱藏（注：以下是利用vue3+element-plus+組合式API實現）

•  html部分：

<el-dropdown trigger="click" :hide-on-click="false" ref="operationDropdownMenuRef">
      <el-button type="primary" plain>二級下拉選單</el-button>
      <
 
template #dropdown>
        <el-dropdown-menu >
          <el-dropdown-item>
            <el-dropdown ref="operationDropdownMenuItem" placement="left-start"  trigger="click" :hide-on-click="false">
              <span @click="operationDropdownShow()">小狐狸</span>
              <
 
template #dropdown>
                <el-dropdown-menu >
                  <!-- 下面的div是為了使頁面點選時第一個選單項不會消失 -->
                  <div @click="operationDropdownShow()">
                    <p style="margin-left:10px">在這裡面你想寫什麼都可以：</p>
                    <el-checkbox-group 
 
v-model="state.checkList"> 
                      <el-row :gutter="24">
                        <el-col :span="8"  v-for="(item, index) in state.dataList" :key="index"> 
                            <el-dropdown-item><el-checkbox  :label="item.prop">{{item.label}}</el-checkbox></el-dropdown-item>
                        </el-col> 
                      </el-row>
                    </el-checkbox-group>  
                  </div>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-dropdown-item>
          <el-dropdown-item>
            <div @click="restoreDefault()">玫瑰花</div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

• 資料部分:

　　checkList: [],
    dataList: [
        {
          label: "絨絨",
          prop: "hrr",
        },
        {
          label: "殼哥",
          prop: "hkk",
        },
        {
          label: "卷兒",
          prop: "hjj",
        },
      ],

• 實現方法:

 const operationDropdownMenuRef = ref(null)
    const operationDropdownShow = () => {
      operationDropdownMenuRef.value.popperRef.onOpen()
      // 如果是vue2的寫法.show()
      // this.$ref.operationDropdownMenuRef.show()
    }
    const restoreDefault = () => {
      operationDropdownMenuRef.value.popperRef.onClose()
      // 同上 .hide()
      // this.$ref.operationDropdownMenuRef.hide()
    }

三、效果圖