elementui dropdown实现二级菜单

    <el-dropdown
          @command="handleCommand($event, key)"
          size="medium"
          trigger="click"
          :hide-on-click="false" 			
          :class="special.className" 
        >
          <span>
            <i
              :class="[
                special.iconClass ? special.iconClass : getToolBarText(key, 'icon'),
                '',
              ]"
            ></i>
            {{ special.text ? special.text : getToolBarText(key) }}
          </span>
          <el-dropdown-menu
            slot="dropdown"
            class="update-elui-style"
            :append-to-body="false"
            ref="mydropd"
          >
            <template v-for="(drop, j) in special.dropdownMenu">
              <el-dropdown-item
                :key="j"
                v-if="!drop.children"
                :command="drop.command"
                :icon="
                  drop.iconClass
                    ? drop.iconClass
                    : getToolbarIconClass(drop.command)
                "
              >
                {{ drop.name }}</el-dropdown-item
              >
              <el-dropdown-item v-else class="children-dropdown">
                <el-dropdown 
                placement="right-start"
                trigger="click"
                >
                  <span class="">
                    <i
                      :class="[
                        special.iconClass
                          ? special.iconClass
                          : getToolBarText(key, 'icon'),
                        '',
                      ]"
                    ></i>
                    {{ drop.name }}
                    <i class="el-icon-caret-right el-icon--right"></i
                  ></span>

                  <el-dropdown-menu
                    slot="dropdown"
                    class="update-elui-style"
                    :append-to-body="false"
                  >
                    <template v-for="(child, j) in drop.children">
                      <el-dropdown-item
                        :command="child.command"
                        :icon="
                          child.iconClass
                            ? child.iconClass
                            : getToolbarIconClass(child.command)
                        "
                      >
                        {{ child.name }}
                      </el-dropdown-item>
                    </template>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </el-dropdown>

数据结构

   special: {
      text: "专题地图",
      iconClass: "icon-ditu gisicon",
      className:"special-map",
      dropdownMenu: [
        {
          name: "征地分析",
          command: "landAnalysis",
          iconClass: "gisicon icon-tudi",
          children: [
            {
              name: "项目进度分析",
              command: "projectProgressAnaly",
            },{
              name: "项目分布分析",
              command: "projectDistributionAnaly",
            },{
              name: "项目地类分析",
              command: "projectLandAnaly",
            },
          ],
        },
        {
          name: "拆除分析",
          command: "dismantleAnaly",
          iconClass: "gisicon icon-tudi",
        },
      ],
    },

method 这是我用来显示不同的图标和名称，自行去掉

       getToolbarIconClass({command,iconClass}) {
      if(iconClass){
        iconClass=iconClass.replace(" "," ");
        return iconClass
      }
      const actionsList = new Map([
        ["xy", "el-icon-location-outline"],
        ["bookmark", "el-icon-discount"],
        ["bounds", "el-icon-full-screen"],
        ["marker", "gisicon icon-biaoji"],
        ["secondMap", "icon-duibi gisicon"],
        ["exportPDF", "el-icon-picture-outline"],
        ["clearAll", "el-icon-delete"],
        ["legend", "icon-tuli gisicon"],
        ["default", "el-icon-more"],
      ]);
      return actionsList.get(command) || actionsList.get("default");
    },
        getToolBarText(key, from) {
      const actionsList = new Map([
        ["measure", ["测量", "gisicon icon-changduceliang"]],
        ["draw", ["绘图工具", "gisicon icon-fuhao-huizhi"]],
        ["layers", ["图层", "gisicon icon-tuceng-"]],
        ["buffer", ["缓冲查询", "gisicon icon-xuxian"]],
        ["othertool", ["工具", "gisicon icon-weibiaoti--"]],
        ["edit", ["编辑地图", "gisicon icon-fuhao-huizhi"]],
        ["default", ["其他工具", "el-icon-more"]],
      ]);
      let action = actionsList.get(key) || actionsList.get("default");
      return from == "icon" ? action[1] : action[0];
    },