根据后端返回的身份权限展示树状菜单

1.data中定义数据 role字段权限

navList: [
        {
          icon: require("../assets/nav_images/presentSituation1.png"),
          activeIcon: require("../assets/nav_images/presentSituationActive1.png"),
          name: "现状",
          index: "/Home/PresentSituation",
          role: ["0", "1", "2", "3"],
          // children: [],
        },
        {
          icon: require("../assets/nav_images/administration1.png"),
          activeIcon: require("../assets/nav_images/administrationActive1.png"),
          name: "管理",
          index: "/Home/Administration",
          role: ["0", "1", "2", "3"],
          children: [
            {
              name: "组织架构管理",
              index: "/Home/Administration",
              role: ["0", "1", "2", "3"],
            },
            {
              name: "员工管理",
              index: "/Home/EmployeeManagement",
              role: ["0", "1", "2", "3"],
            },
          ],
        },
        {
          icon: require("../assets/nav_images/operation1.png"),
          activeIcon: require("../assets/nav_images/operationActive1.png"),
          name: "操作",
          index: "/Home/Operation",
          role: ["0", "1", "2", "3"],
        },
        {
          icon: require("../assets/nav_images/statistics1.png"),
          activeIcon: require("../assets/nav_images/statisticsActive1.png"),
          name: "统计",
          index: "/Home/Statistics",
          role: ["0", "1", "2"],
          // children: [],
        },
        {
          icon: require("../assets/nav_images/history1.png"),
          activeIcon: require("../assets/nav_images/historyActive1.png"),
          name: "历史",
          index: "/Home/History",
          role: ["0", "1", "2"],
          // children: [],
        },
        {
          icon: require("../assets/nav_images/Abnormal1.png"),
          activeIcon: require("../assets/nav_images/AbnormalActive1.png"),
          name: "异常",
          index: "/Home/Abnormal",
          role: ["0",],
          children: [
            {
              name: `异常信息`,
              index: "/Home/Abnormal",
              role: ["0",],
            },
            {
              name: "历史异常",
              index: "/Home/HistoryAbnormal",
              role: ["0",],
            },
          ],
          // children: [],
        },
      ],

2.在computed头中根据权限筛选出要循环的数组

computed: {
    roleArr () {
      return this.navList.filter((obj) => {
        let role = JSON.parse(window.sessionStorage.getItem('userInfo')).role;
        role = role.slice(1, role.length - 1).split(",").sort((a, b) => {
          return a - b;
        });
        return obj.role.includes(role[0]);
      });
    },
}

3.在html中循环过滤后的数组

    <div class="nav-item"
               v-for="item in roleArr"
               :key="item.index">
            <el-menu-item v-if="!item.children"
                          :key="item.index"
                          :index="item.index">
              <div> <img class="icon-img"
                     :src="item.icon" />
                <span slot="title">{{ item.name }}</span>
              </div>
            </el-menu-item>
            <template v-else>
              <el-submenu :key="item.index"
                          :index="item.index">
                <template slot="title">
                  <img class="icon-img"
                       :src="item.icon" />
                  <span>{{ item.name }}</span>
                </template>
                <el-menu-item v-for="(child, i) in item.children"
                              :key="child.index + '' + i"
                              :index="child.index">
                  <span slot="title"
                        class="ml20">
                    {{ child.name }}
                  </span>
                </el-menu-item>
              </el-submenu>
            </template>
          </div>