技術標籤：vuejavascript

<el-dropdown
          @command="handleCommand($event, key)"
          size="medium"
          trigger="click"
          :hide-on-click="false" 			是否在點選選單項後隱藏選單
          v-else
          :class="value.className" 
        >
          <span>
            <i
              :class="[
                value.iconClass ? value.iconClass : getToolBarText(key, 'icon'),
                '',
              ]"
            ></i>
            {{ value.text ? value.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 value.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="[
                        value.iconClass
                          ? value.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",
        },
      ],
    },