element菜单循环\回调

封装菜单页面

<template>
  <div style="height: 100%;">
    <el-menu
      default-active="dayshowsee"
      class="el-menu-vertical-demo"
    >
      <template v-for="(item, index) in menuList">
        <el-submenu v-if="item.child&&item.child.length>0" :key="item.id" :index="item.id">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>{{item.name}}</span>
          </template>
          <span :style="'padding-left:'+ (index * 20) + 'px'">
          	<!-- 递归子节点（注意这里的回调是必须的，否则父页面回调不能正常传回） -->
            <LeftRegionMenu @menuChange="regionMenuChanage" style="padding-left: 16px;" :menuList="item.child"/>
          </span>
        </el-submenu>
        <el-menu-item @click="menuClick(item.id)" v-else :key="item.id" :index="item.id">{{item.name}}</el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
// 注意这里是引入的组件自身，因为子节点无限所以需要递归自身实现！
import LeftRegionMenu from "@/views/home/dayclear/components/LeftRegionMenu";

export default {
  name: "LeftRegionMenu",
  components: {
    LeftRegionMenu
  },
  props: {
    menuList: {
      // 模拟数据
      default: ()=>[
        {
            name: "日清列表",
            id: "2",
            child: [
                { name: "查看日清", id: "dayshowsee" },
                {
                    name: "新增日清",
                    id: "dayshowadd",
                },
                {
                    name: "历史日清",
                    id: "dayshowhistory",
                }
            ]
        },
      ]
    }
  },
  methods: {
  	// 原始引入页面的回调
    menuClick(id) {
      this.$emit("menuChange", id);
    },
    // 组件本身使用的回调（无限递归的子组件会通过这个一级一级回传到原始引入页面）
    regionMenuChanage(id) {
      this.$emit("menuChange", id);
    }
  }
};
// 这部分样式自己按需修改或删除
</script>
<style>
.el-col-12 {
  width: 95%;
}
</style>

引用菜单页面

// `template`
`<LeftRegionMenu @menuChange="menuChange"/>`
// js
menuChange(key) {
    this.$router.push({path: '/dayclear/'+key});
},