记录--vue+element无限级动态树菜单（加入点击事件）

因为项目里需要用到多级动态菜单，在网上找了一下参考了这位的方法 点我点我
首先创建一个子组件：

<template>
  <div class="menutree">
    <label v-for="menu in data" :key="menu.index">
      <el-submenu :index="menu.index" v-if="menu.info">
        <template slot="title">
          <div @click="dataClick(menu)" @dataClick="dataClick">{{ menu.name }}</div>
        </template>
        <label>
          <menutree :data="menu.info"></menutree>
        </label>
      </el-submenu>
      <el-menu-item v-else :index="menu.index" @click="dataClick(menu)">
        <span slot="title">{{ menu.name }}</span>
      </el-menu-item>
    </label>
  </div>
</template>
<script>
import menutree from "./menu"; // 调用自己
export default {
  name: "menutree",
  data() {
    return {
      directory: {}
    };
  },
  components: {
    menutree: menutree
  },
  props: ["data"],
  methods:{
    dataClick(e) { // 传递点击事件到父组件
      this.$emit('dataClick',e)
    }
  }
};
</script>

父级调用：

<template>
	<el-menu :default-openeds="defaultOpeneds">
		<menutree :data="directory" @dataClick="dataClick"></menutree>
    </el-menu>
</template>
<script>
import menutree from "../common/menu";

export default {
  components: {
    menutree: menutree
  },
  data() {
    return {
      directory:[], // 给子组件的菜单数据
      defaultOpeneds:[]
    };
  },
  methods: {
    // 子组件的点击事件
    dataClick(e) {
      console.log(e)
    }
  }
};
</script>

补充： 如果需要默认展开某一级则需要加上default-openeds属性（按理来说使用default-active属性也能实现，但是在我的项目中无效，使用default-active是OK的）
使用default-active时需要吧父级的层级标识传进去才能展示到你需要的那一层哦！

好啦，结束，就是这些啦