• 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%;  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>
  • 相关阅读:
    如何查看MySQL的当前存储引擎?
    避免生产环境执行更新删除语句忘记加where条件的解决方案
    物联网发展的现状
    目前行业内比较流行的开源时序数据库产品
    如何查看端口(3306)被那个程序占用
    MySQL数据库开发的36条军规
    介绍 MySQL 8 中值得关注的新特性和改进。
    IE浏览器 兼容性(IE9-11 差异说明)
    python3:(unicode error) 'utf-8' codec can't decode
    静态代码块
  • 原文地址:https://www.cnblogs.com/home-/p/11976771.html
Copyright © 2020-2023  润新知