安装

npm i hlh-menu-ui npm i element-ui -S

引入

import hlhMenuTree from 'hlh-menu-tree'

全局注册

Vue.use(hlhMenuTree);

页面使用

<template>
  <div class="element-box">
    <el-col :span="4">
      <el-menu
        :default-active="value"
        @select="changeEvent"
        class="el-menu-vertical-demo"
      >
        <menu-tree :menuData="dataList"></menu-tree>
      </el-menu>
    </el-col>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      value: "A1",
      dataList: [
        {
          id: 1,
          text: "A1",
          children: [
            {
              id: 11,
              text: "a1",
              value: "a1",
            },
            {
              id: 12,
              text: "b1",
              value: "b1",
            },
          ],
          vlaue: "A1",
        },

        {
          id: 2,
          text: "B1",
          children: [
            {
              id: 21,
              text: "b1",
              value: "b1",
            },
            {
              id: 22,
              text: "b2",
              value: "b2",
              children: [
                {
                  id: 221,
                  text: "bb2",
                  value: "bb2",
                },
                {
                  id: 222,
                  text: "bb3",
                  value: "bb3",
                },
              ],
            },
          ],
          vlaue: "B1",
        },
      ], //选项数据
    };
  },
};
</script>

<style></style>