vue配合element实现三级菜单

实现三级菜单直接上代码

<template>
  <el-row style="width: 100%">
    <el-col style="height: 100%" :span="4">
      <el-menu
        class="abcd-text"
        style="
          height: 100%;
          width: 258px;
          overflow: hidden;
          border-right: solid 1px #e6e6e6;
        "
        default-active="1-1"
        :default-openeds="childArr"
        background-color="#fff"
        text-color="#000000"
        active-text-color="#fff"
        @select="slideSelect"
      >
        <!-- 一级菜单 -->
        <template v-for="item in list">
          <el-submenu
            v-if="item.children && item.children.length"
            :index="item.path"
            :key="item.path"
          >
            <template slot="title"
              ><i :class="item.icon"></i><span>{{ item.name }}</span></template
            >

            <!-- 二级菜单 -->
            <template v-for="itemChild in item.children">
              <el-submenu
                v-if="itemChild.children && itemChild.children.length"
                :index="itemChild.path"
                :key="itemChild.path"
              >
                <template slot="title"
                  ><i :class="itemChild.icon"></i
                  ><span>{{ itemChild.name }}</span></template
                >

                <!-- 三级菜单 -->
                <el-menu-item
                  v-for="itemChild_Child in itemChild.children"
                  :index="itemChild_Child.path"
                  :key="itemChild_Child.path"
                  @click.native="
                    setPath(itemChild_Child, itemChild_Child.path, key, $event)
                  "
                >
                  <i :class="itemChild_Child.icon"></i
                  ><span slot="title">{{
                    itemChild_Child.name
                  }}</span></el-menu-item
                >
              </el-submenu>

              <el-menu-item v-else :index="itemChild.path" :key="itemChild.path"
                ><i :class="itemChild.icon"></i
                ><span slot="title">{{ itemChild.name }}</span></el-menu-item
              >
            </template>
          </el-submenu>

          <el-menu-item @click.native="
                    setPath(item, item.path, key, $event)
                  " v-else :index="item.path" :key="item.path"
            ><i :class="item.icon"></i
            ><span slot="title">{{ item.name }}</span></el-menu-item
          >
        </template>
      </el-menu>
    </el-col>
    <el-col :span="20" style="height:920px;overflow: auto;">
      <router-view/>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          path: "1",
          name: "1.产品介绍",
          icon: "el-icon-document-copy",
          children: [
            {
              path: "1-1",
              name: "1.1产品概述",
              icon: "el-icon-tickets",
            },
            {
              path: "1-2",
              name: "1.2产品优势",
              icon: "el-icon-notebook-2",
            },
            {
              path: "1-3",
              name: "1.3兼容性与术语",
              icon: "el-icon-collection",
            },
          ],
        },
        {
          path: "2",
          name: "2.快速入门",
          icon: "el-icon-news",
        },
        {
          path: "3",
          name: "3.使用指南",
          icon: "el-icon-notebook-1",
          children: [
            {
              path: "3-1",
              name: "3.1角色介绍",
              icon: "el-icon-user",
            },
            {
              path: "3-2",
              name: "3.2集成方式",
              icon: "el-icon-c-scale-to-original",
              children: [
                {
                  path: "3-2-1",
                  name: "3.2.1SDK集成",
                  icon: "el-icon-menu",
                },
                {
                  path: "3-2-2",
                  name: "3.2.2应用托管",
                  icon: "el-icon-menu",
                },
              ],
            },
            {
              path: "3-3",
              name: "3.3业务场景",
              icon: "el-icon-menu",
              children: [
                {
                  path: "3-3-1",
                  name: "3.3.1MDM",
                  icon: "el-icon-data-board",
                },
                {
                  path: "3-3-2",
                  name: "3.3.2BYOD",
                  icon: "el-icon-data-line",
                },
              ],
            },
            {
              path: "3-4",
              name: "3.4业务支撑",
              icon: "el-icon-printer",
              children: [
                {
                  path: "3-4-1",
                  name: "3.4.1移动运维",
                  icon: "el-icon-mobile",
                },
                {
                  path: "3-4-2",
                  name: "3.4.2运营态势",
                  icon: "el-icon-bangzhu",
                },
              ],
            },
          ],
        },
      ],
      activeIndex: "1-1",
      childArr: ["1", "2", "3", "4", "5","3-2","3-3","3-4"],
    };
  },
  methods: {
    slideSelect(key, keyPath, item) {
      console.log(key, keyPath, item);
      this.activeIndex = key;
    },
    setPath(item, key, index, even) {
        
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-submenu.is-active .el-submenu__title {
  background: none !important;
}
::v-deep .el-submenu .el-submenu__title {
  font-size: 14px !important;
  border-bottom: 1px solid #e0dada !important;
  height: 50px;
  line-height: 50px;
}
::v-deep .el-menu-item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e0dada !important;
}
::v-deep .el-icon-arrow-down:before {
  color: #000;
}
::v-deep .el-menu-item.is-active {
  background: #1e89e5 !important;
}
::v-deep .el-aside .el-menu .el-submenu .el-menu-item:hover {

}
::v-deep .el-submenu .el-submenu__title:hover {
  background: #3a91ef !important;
}
::v-deep .el-aside .el-menu .el-menu-item:hover {
  background: #3a91ef !important;
  color: #fff !important;
  font-weight: bold;
}
::v-deep .el-submenu .el-submenu__title:hover {
  background: #3a91ef !important;
}
.el-subments {
  background: #3a91ef !important;
  border-top: 1px solid #fff;
  color: #fff !important;
}
/* 文字 */
::v-deep.el-submenu.is-active > .el-submenu__title {  //子集点的时候给父级添加高亮
  background: #3a91ef !important;
  color: #fff !important;
}
/* icon图标也跟着变 */
::v-deep .el-submenu.is-active > .el-submenu__title i { //子集点的时候给父级添加高亮
    background: #3a91ef !important;
  color: #fff !important;
}
</style>