Vue菜单栏权限

她早已目视前方从来都不回头看,加快了步伐从不在乎年华已过半,坚定的眼神 过去的遗憾

话不多说，菜单栏权限( 根据后端返回的数据进行渲染 )

后台返回的数据结构( 未处理 根据parentId 分离出父子级菜单 有null为父级 没有为子级)

[　　

　　{
　　　　"id": 352,
　　　　"parentId": 347,
　　　　"name": "出场记录",
　　　　"url": "/grouplessonschedule/list",
　　　　"urlMethod": "POST",
　　　　"component": "components/syllabusLeagueClass/index.vue"
　　},
　　{
　　　　"id": 392,
　　　　"parentId": null,
　　　　"name": "出场资格",
　　　　"url": null,
　　　　"urlMethod": null,
　　　　"component": "components/feedback/index.vue"
　　}

 

]

侧边导航栏数据结构( 处理后的结构 childrenMenuLis如果为空说明就是个一级菜单，如果有值说明有二级)：

[

　　{　　　

　　　　childrenMenuLis:[]

　　　　component: "components/instrument/index.vue"

　　　　id: "303"

　　　　name: "操作盘"

　　　　parentId: null

　　　　switchState: true

　　　　url: "/instrument"

　　　　urlMethod: null

　　}

]

处理返回的菜单数据数据：

data中：
// 接收数据
menuListVal: [],//接收所有菜单数据
parentVal: [],//父级菜单数据
childBtnVal: [],//子级菜单数据
parentChildMap: [],
事件中：
menuList() {
      this.$ajax.get("/menu/list").then(res => {
        this.menuListVal = res.data.data;//接收返回的菜单数据
　　　　　　this.menuListVal.filter(item => {// 根据parentId 分离出父子级菜单 有null为父级(一级) 没有为子级(二级)
          if (item.parentId == null) {//父级
            this.parentVal.push(item);
          } else if (item.parentId != null) {//子级
            this.childBtnVal.push(item);
          }
        });
        this.parentVal.filter(items => {//过滤一级菜单，添加属性
          items.switchState = true;//控制权限显示隐藏
          // 定义一个空数组根据条件 把子级插进去
          items.childrenMenuLis = [];//存放二级菜单
          this.childBtnVal.filter(itemChild => {
            // 根据条件将所有子级插入
            if (items.id == itemChild.parentId) {//如果一级菜单中的id === 二级中的父级id 将二级菜单存放的父级定义的数组里
              items.childrenMenuLis.push(itemChild);
            }
          });
        });
        this.parentChildMap = this.parentVal;//可以循环遍历数据了
        // console.log(this.parentChildMap);
      });
    }

created() {
    this.menuList();
}

处理图标:( 根据name进行对应显示 )

[

　　{　　　

　　　　childrenMenuLis: Array(0)

　　　　component: "components/instrument/index.vue"

　　　　iconClassName: "el-icon-pie-chart"

　　　　id: "303"

　　　　index: 1

　　　　name: "仪表盘"

　　　　parentId: null

　　　　switchState: true

　　　　url: "/instrument"

　　　　urlMethod: null

 

　　}

]

(

　　把两个数组里的多个对象一一对应合并

　　合并数组或者对象在数组或对象前面加 "..."，是es6的新写法，然后数组的map方法会返回数组

)

data中：
//定义的图标样式
classIcon: [
        { index: 1, iconClassName: "el-icon-pie-chart" },
        { index: 2, iconClassName: "el-icon-takeaway-box" },
        { index: 3, iconClassName: "el-icon-monitor" },
        { index: 4, iconClassName: "el-icon-collection" },
        { index: 5, iconClassName: "el-icon-time" },
        { index: 6, iconClassName: "el-icon-present" },
        { index: 7, iconClassName: "el-icon-s-data" },
        { index: 8, iconClassName: "el-icon-document-copy" },
        { index: 9, iconClassName: "el-icon-key" },
        { index: 10, iconClassName: "el-icon-sell" },
        { index: 11, iconClassName: "el-icon-set-up" },
        { index: 12, iconClassName: "el-icon-unlock" }
],
iconIcon: []

事件中：
menuList() {
    // 将this.parentChildMap里的值与this.classIcon数组里的值合并，通过用户名显示对应图标,并返回新数组
        this.iconIcon = this.parentChildMap.map((item, index) => {
          return { ...item, ...this.classIcon[index] };
　　　　　　//此时iconIcon里面就有name和图标class了可以循环遍历了
    });
}

遍历数据渲染

<el-container>
      <!-- 侧边导航区 -->
      <el-aside width="244px" padding-top="10px" :style="asideStyle">
        <el-row class="tac" width="244px" style="user-select:none;height:100%">
          <el-col :span="12" style="user-select:none;height:100%; width: 101%">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#13141f"
              text-color="#fff"
              active-text-color="#fff"
              router
              style="height:100%"
            >
              <!-- 第一次循环 父级菜单栏显示-->
              <div v-for="(item, index) in parentChildMap" :key="index">
                <!-- 如果item.childrenMenuLis.length大于0说明有子级,先显示父级在触发子级 item.switchState控制导航栏显示隐藏-->
                <el-submenu
                  :index="item.id"
                  v-show="item.switchState"
                  v-if="item.childrenMenuLis.length > 0"
                  style="text-align: left;padding-left: 24px;"
                >
                  <!-- 循环父级菜单的图标 item.name == icon.name如果名称相同就显示对应图标-->
                  <template slot="title">
                    <i
                      v-for="(icon, index) in iconIcon"
                      :key="index"
                      :class="item.name == icon.name ? icon.iconClassName : ''"
                    ></i>
                    <span>{{ item.name }}</span>　　将父级名称显示出来在来触发子级
                  </template>
                  <!-- 循环出子级菜单数据 -->
                  <el-menu-item-group
                    v-for="(itemChild, indexChild) in item.childrenMenuLis"
                    :key="indexChild"
                  >
                    <el-menu-item :index="itemChild.url">{{
                      itemChild.name
                    }}</el-menu-item> 跳转的路由与子级名称
                  </el-menu-item-group>
                </el-submenu>
                <!-- 如果item.childrenMenuLis.length等于0,说明只有一级直接显示 -->
                <el-menu-item
                  v-if="item.childrenMenuLis.length === 0"
                  :index="item.url"
                  style="text-align: left;padding-left: 44px;"
                >
                  <!-- 循环出只有一级的图标 item.name == icon.name如果名称相同就显示对应图标-->
                  <span v-for="(icon1, index1) in iconIcon" :key="index1">
                    <i
                      :key="index1"
                      :class="
                        item.name == icon1.name ? icon1.iconClassName : ''
                      "
                    ></i> </span
                  >{{ item.name }}导航名</el-menu-item
                >
              </div>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
    </el-container>