SOURCE

var Main = {
    data () {
    return {
            tableList:[
                {
                    title: '导航一',
                    index: '1',
                    id: 1,
                    children:[
                        {
                            title: '二级1-1',
                            index: '1-1',
                            id: 11
                        }
                    ]
                },
                {
                    title: '导航二',
                    index: '2',
                    id: 2
                },
                {
                    title: '导航三',
                    index: '3',
                    id: 3,
                    children:[
                        {
                            title: '二级3-1',
                            index: '3-1',
                            id: 31,
                            children: [
                                { title: '三级3-1-1', index: '3-1-1', id: 311 },
                                { title: '三级3-1-2', index: '3-1-2', id: 312 }
                            ]
                        }
                    ]
                },
                {
                    title: '导航四',
                    index: '4',
                    id: 4,
                    children:[
                        {
                            title: '二级4-1',
                            index: '4-1',
                            id: 41,
                            children: [
                                { title: '三级4-1-1', index: '4-1-1', id: 411 },
                                { title: '三级4-1-2', index: '4-1-2', id: 412 },
                                { title: '三级4-1-2', index: '4-1-3', id: 413 }
                            ]
                        },
                        {
                            title: '二级4-2',
                            index: '4-2',
                            id: 42,
                            children: [
                                { title: '三级4-2-1', index: '4-1-1', id: 421 },
                                { title: '三级4-2-2', index: '4-1-2', id: 422 }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath); 
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        subMenuClick(m3, m2, m1) {
            var _this = this
            // console.log('m3', m3)
            console.log('m2', m2)
            // console.log('m1', m1)
            /**
             * 隐藏popopver
             * 估计是这里编译器问题获取不到this，无法测试是否有效
             */
            // 方法一  貌似不行
            // const isPopover = document.querySelector('.subPopover')
            // if(isPopover){
            //     isPopover.parentElement.setAttribute('aria-hidden', true)
            // }
            // 方法二
            // this.$nextTick(() => {
            //     console.log('popp', this.$refs.popoverRef)
            //     this.$refs.popoverRef.doClose()
            // })
        },
    },
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>

<div id="app">
  <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <div v-for="m1, index in tableList" :key="index">
        <el-submenu v-if="m1.children" :index="m1.index">
            <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ m1.title }}</span>
            </template>
            <div v-for="m2,index in m1.children" :key="index">
                <el-menu-item v-if="m2.children" :index="m2.index">
                    <!-- <span slot="title">
                        {{ m2.title }}111111
                    </span> -->
                    <el-popover
                        placement="right"
                        :visible-arrow="false"
                        popper-class="popper"
                        trigger="click"
                        ref="popoverRef"
                    >
                        <div
                            v-for="m3, index in m2.children"
                            :key="index"
                            class="subPopover"
                            @click="subMenuClick(m3, m2, m1)"
                        >
                            <span>{{ m3.title }}</span>
                        </div>
                        <span slot="reference">
                            {{ m2.title }} popover
                            <i class="el-icon-arrow-right"></i>
                        </span>
                    </el-popover>
                </el-menu-item>
                <el-menu-item v-else :index="m2.index">
                    <i class="el-icon-location"></i>
                    <span slot="title">{{ m2.title }}</span>
                </el-menu-item>
            </div>
        </el-submenu>
        <el-menu-item v-else :index="m1.index">
            <i class="el-icon-menu"></i>
            <span slot="title">{{ m1.title }}</span>
        </el-menu-item>
      </div>
    </el-menu>
</div>

/* @import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css"); */
.el-menu{
    width: 200px;
}
.popper{
    min-width: 100px !important;
    left: 200px !important;
    padding: 0px !important;
    border: 1px solid #3e8cfa !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 10px 0px rgba(46,90,153,0.20) !important;
}
/* 这个编译器不支持scss写法 subPopover可以嵌套在popper里面  */
.popper .subPopover{
    height: 30px;
    line-height: 30px;
    padding: 0px 20px;
    cursor: pointer;
}
.popper .subPopover:hover{
    color: #2E5A99;
    background-color: #EBF3FF;
    /* border-radius: 8px; */
}
.popper .subPopover:first-child{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.popper .subPopover:last-child{
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.el-popover__reference{
    display: block;
}
.el-icon-arrow-right{
    zoom: 0.75;
    margin-left: 15px;
}