vue + element-ui el-menu+el-tree制作导航

         <el-row style="min-height:50vh;">
            <el-col>
              <el-menu
                v-for="(item,index) in $store.state.menuList"
                :key="index"
                :index="String(index)"
                :default-active="$route.path"
                background-color="#304156"
                text-color="#fff"
                collapse-transition
              > 
                <!-- 没有子菜单 -->
                <el-menu-item
                  v-if="item.childList.length < 1 "
                  @click.native="routeTo(item.modelAction)"
                  :index="String(index)"
                >
                  <span slot="title">{{item.permissionName}}</span>
                </el-menu-item>

                <!--有子菜单 -->
                <el-submenu :index="String(index)" v-else>
                  <template slot="title">
                    <span>{{item.permissionName}}</span>
                  </template>
                  <label>
                    <el-tree
                      :data="item.childList"
                      :props="defaultProps"
                      @node-click="handleNodeClick"
                    ></el-tree>
                  </label>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>

在methods中：

   //递归筛选菜单
    me_getlistMenu() {
      //获取菜单列表
      const config = {
        roleId: 0,
      };
      this.$store
        .dispatch("getMenuList", { config }) //获取菜单列表
        .then((content) => {
          var content = JSON.parse(JSON.stringify(content));
          this.$store.dispatch("updateMenuList", content); //过滤菜单
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
//关于路由跳转
    handleNodeClick(data) {
      if (data.childList.length === 0) {
        this.$router.push({ name: String(data.modelAction) });
      }
    },
    routeTo(path) {
      this.$router.push({ name: String(path) });
    },

使用了vuex保存数据和方法
在action.js中：

    updateMenuList(context, payload) {//过滤菜单
        // console.log(payload)
        function filterMenu(payload) {
            //判斷是不是菜單
            new Promise((resolve, reject) => {
                const menu = payload.filter((item) => {
                    return item.menuFlag; //menuFlag为true表示是菜单 需要展示出来
                });
                resolve(menu);
            }).then((res) => {
                //已得到一级父级中是菜单的数据
               //现在过滤子菜单 将不是菜单的子级删除 使用递归

                const get = function (list) {
                    return new Promise((resolve, reject) => {
                        list
                            .slice()
                            .reverse()
                            .forEach((row, index, arr1) => {
                                // console.log(row, index);
                                if ((!row.haveChildFlag && !row.menuFlag) || (row.haveChildFlag && !row.menuFlag)) {

                                    list.splice(arr1.length - 1 - index, 1);
                                } else {
                                    // console.log("是菜单，并且有子菜单", row);
                                    get(row.childList);
                                }
                            });
                        resolve(list);
                    });
                };
                get(res).then((res) => {
                    context.commit('getMenuList', res)
                });
            });
        }
        filterMenu(payload)
    },
    //获取菜单列表
    getMenuList(context) { //发送网络请求获取菜单列表
        return new Promise((resolve, reject) => {
            getListMenu().then(res => {
                const code = res.data.code;
                if (code == 100) {
                    const content = res.data.content.allPermissionList;
                    context.commit('getPermissionList', content)
                    // console.log(content);
                    resolve(content)
                } else {
                    const message = res.data.message
                    reject(message)
                }
            });
        })
    },

在mutations中：

    getMenuList(state, params) {//更新保存菜单列表
        state.menuList = params
    },

在index.js中保存的state：

const state = {
  menuList: [],//菜单列表
}

数据：

"content":{
        "allPermissionList":[
            {
                "childList":[
                    {
                        "childList":[],
                        "haveChildFlag":false,///根据这个字段判断是不是有没有子级
                        "menuFlag":true,///根据这个字段判断是不是菜单 是菜单就在导航中显示出来
                        "modelAction":"admin/listRole",
                        "parentLevelId":1,
                        "permissionId":2,
                        "permissionName":"角色管理"
                    },
                    {
                        "childList":[],
                        "haveChildFlag":true,
                        "menuFlag":true,
                        "modelAction":"admin/listPermission",
                        "parentLevelId":1,
                        "permissionId":8,
                        "permissionName":"菜单管理"
                    },
                ],
                "haveChildFlag":true,
                "menuFlag":true,
                "modelAction":"admin",
                "parentLevelId":0,
                "permissionId":1,
                "permissionName":"系统管理"
            },
            {
                "childList":[
                    {
                        "childList":[],
                        "haveChildFlag":false,
                        "menuFlag":false,
                        "modelAction":"terminal/listTerminal",
                        "parentLevelId":6,
                        "permissionId":7,
                        "permissionName":"设备列表"
                    },
                ],
                "haveChildFlag":true,
                "menuFlag":true,
                "modelAction":"terminal",
                "parentLevelId":0,
                "permissionId":6,
                "permissionName":"设备管理"
            },
            {
                "childList":[
                    
                    {
                        "childList":[
                            {
                                "childList":[],
                                "haveChildFlag":false,
                                "menuFlag":true,
                                "modelAction":"dispathTask/yinliu/follow",
                                "parentLevelId":61,
                                "permissionId":63,
                                "permissionName":"关注功能"
                            }
                        ],
                        "haveChildFlag":true,
                        "menuFlag":true,
                        "modelAction":"executeTask/yinliu",
                        "parentLevelId":59,
                        "permissionId":61,
                        "permissionName":"引流功能"
                    },
                    {
                        "childList":[],
                        "haveChildFlag":false,
                        "menuFlag":true,
                        "modelAction":"dispathTask/danxiang",
                        "parentLevelId":59,
                        "permissionId":66,
                        "permissionName":"单项功能"
                    },
                ],
                "haveChildFlag":true,
                "menuFlag":true,
                "modelAction":"dispathTask",
                "parentLevelId":0,
                "permissionId":59,
                "permissionName":"任务下发"
            },
            {
                "childList":[],
                "haveChildFlag":false,
                "menuFlag":false,
                "modelAction":"admin/getCurrentUserInfo",
                "parentLevelId":0,
                "permissionId":78,
                "permissionName":"获取当前用户信息"
            },
        ]
    },

效果：

image.png