用el-menu和el-dropdown实现下拉菜单

参照jd页面显示效果：
思路分析，使用 el-menu 实现导航菜单，使用 el-dropdown 实现下拉效果

查看element官方文档，发现跟想要的效果有差距，如上图，我要实现hover时触发下拉菜单，并且下拉菜单为多列，每列有列名。

此时我们可以使用容器 <el-container>包裹住</el-dropdown-item>，让第一行显示列名
代码如下：

<template>
  <div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      text-color="#999"
      background-color="#e3e4e5"
    >
      <el-menu-item
        v-for="(mitem, mindex) in menuList"
        :key="mindex"
        :index="mitem.index"
      >
        <el-dropdown @command="onClick" v-if="mitem.menu">
          <span class="el-dropdown-link" v-text="mitem.menuItem">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-container v-for="(items, index) in mitem.menu" :key="index">
              <el-main>
                <el-dropdown-item
                  v-if="items.sortTitle"
                  v-text="items.sortTitle"
                  disabled
                  class="dropdown-sortTitle"
                >
                </el-dropdown-item>
                <el-dropdown-item
                  v-for="(a, aindex) in items.dropdownItem"
                  :key="aindex"
                  :command="a.link"
                  v-text="a.title"
                ></el-dropdown-item>
              </el-main>
            </el-container>
          </el-dropdown-menu>
        </el-dropdown>
        <span
          class="el-dropdown-link"
          v-text="mitem.menuItem"
          slot="title"
          v-else
          @click="onClick(mitem.url)"
        >
        </span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      menuList: [
        {
          index: "1",
          menuItem: "网站导航",
          menu: [
            {
              sortTitle: "特色主题",
              dropdownItem: [
                { title: "新品首发", link: "/alert" },
                { title: "京东金融", link: "/alert" },
                { title: "全球购", link: "/alert" },
                { title: "国际站", link: "/alert" },
                { title: "京东会员", link: "/alert" },
              ],
            },
            {
              sortTitle: "行业频道",
              dropdownItem: [
                { title: "手机", link: "/alert" },
                { title: "智能数码", link: "/alert" },
                { title: "玩3C", link: "/alert" },
                { title: "电脑办公", link: "/alert" },
                { title: "家用电器", link: "/alert" },
                { title: "京鱼座智能", link: "/alert" },
              ],
            },
            {
              sortTitle: "生活服务",
              dropdownItem: [
                { title: "京东众筹", link: "/alert" },
                { title: "白条", link: "/alert" },
                { title: "京东金融App", link: "/alert" },
                { title: "京东小金库", link: "/alert" },
              ],
            },

            {
              sortTitle: "更多精选",
              dropdownItem: [
                { title: "合作招商", link: "/alert" },
                { title: "京东通信", link: "/alert" },
                { title: "京东E卡", link: "/alert" },
                { title: "企业采购", link: "/alert" },
                { title: "服务市场", link: "/alert" },
                { title: "办公生活馆", link: "/alert" },
                { title: "校园加盟", link: "/alert" },
              ],
            },
          ],
        },
        {
          index: "2",
          menuItem: "客户服务",
          menu: [
            {
              sortTitle: "客户",
              dropdownItem: [
                { title: "帮助中心", link: "/alert" },
                { title: "售后服务", link: "/alert" },
                { title: "在线客服", link: "/alert" },
                { title: "意见建议", link: "/alert" },
              ],
            },
            {
              sortTitle: "商户",
              dropdownItem: [
                { title: "合作招商", link: "/alert" },
                { title: "成长中心", link: "/alert" },
                { title: "商家后台", link: "/alert" },
                { title: "京麦工作台", link: "/alert" },
                { title: "商家帮助", link: "/alert" },
                { title: "规则平台", link: "/alert" },
              ],
            },
          ],
        },
        {
          index: "3",
          menuItem: "手机京东",
        },
        {
          index: "4",
          menuItem: "我的订单",
          url:
            "https://passport.jd.com/uc/login?
            ReturnUrl=https%3A%2F%2Forder.jd.com%2Fcenter%2Flist.action",
        },
      ],
    };
  },
  methods: {
    onClick(url) {
      console.log(url);
      window.location.href = url;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style>
.el-dropdown-link {
  color: #999;
}
.el-dropdown-menu > .el-container {
  width: 170px;
  float: left;
}
.dropdown-sortTitle {
  font-weight: 700;
  color: #666 !important;
  border-bottom: 1px solid #ececec;
}
</style>