当前位置: 首页>前端>正文

element 侧边栏宽度的手动缩放功能 element ui 侧边栏菜单

el-element组件库中的el-menu组件用来做侧边栏导航非常方便

element 侧边栏宽度的手动缩放功能 element ui 侧边栏菜单,element 侧边栏宽度的手动缩放功能 element ui 侧边栏菜单_elementui,第1张

我在做vue后台管理系统项目时,侧边栏导航选用了右边这种布局

element 侧边栏宽度的手动缩放功能 element ui 侧边栏菜单,element 侧边栏宽度的手动缩放功能 element ui 侧边栏菜单_vue.js_02,第2张

 可以发现初始页面路径为'/home/,也就是主页,侧边栏也因此对应着高亮“首页”选项。此外选择其他选项,也能对应着跳转到目标路径,同时高亮对应侧边栏选项。

具体设置代码如下:

<template>
    <el-menu
    :default-active="this.$route.path"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
        <h3 class="menu-title">{{isCollapse ? '后台' :'通用后台管理系统'}}</h3>
            <el-menu-item
            v-for="item in noChilderen"
            :index="item.path === '/' ? '/home' : item.path" :key="item.path"
            @click="clickMenu(item)">
           //此处index设置稍有不同,是因为我路由设置里用了重定向,让'/'路径重定向到'/home'路径,这就使得我事先获取的数据中的'/'路径无法和默认跳转的'/home'相匹配,故有此设置
                <i :class="'el-icon-'+item.icon"></i>
                <span slot="title">{{item.label}}</span>
            </el-menu-item>
      <el-submenu v-for="item in hasChilderen" :index="item.path+''" :key="item.path">
            <template slot="title">
              <i :class="'el-icon-'+item.icon"></i>
              <span slot="title">{{item.label}}</span>
            </template>
            <el-menu-item-group v-for="(subItem) in item.children" :key=subItem.path>
                  <el-menu-item :index="subItem.path" @click="clickSubMenu(subItem)">
                      {{subItem.label}}
                  </el-menu-item>
            </el-menu-item-group>
      </el-submenu>
    </el-menu>
</template>
computed: {
    //对获取的数据进行处理,分割出无子菜单和有子菜单的两组数据
    noChilderen () {
      return this.asyncMenu.filter(value => !value.children)
    },
    hasChilderen () {
      return this.asyncMenu.filter(value => value.children)
    },
    //menus是否折叠判断设置函数,与此侧边栏功能实现关系不大
    isCollapse () {
      return this.$store.state.tab.isCollapse
    },
    asyncMenu () {
      return this.$store.state.tab.menu
       //从vuex中获取数据
    }
  },
methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    //点击侧边栏的选项触发对应页面的跳转事件
    clickMenu (item) {
      this.$router.push({ path: item.path })
  //同步跳转生成tab栏,与此侧边栏功能实现关系不大
      this.selectMenu(item)
    },
    clickSubMenu (subItem) {
      this.$router.push({ path: subItem.path })
      this.selectMenu(subItem)
    },
  //导入vuex中的selectMenu函数
    ...mapMutations(['selectMenu'])
  },

我是利用v-for循环来生成侧边栏,其中noChilderen是没有子菜单的数据组,hasChildren则是有子菜单的数据组,它们都事先获取了相关的path,name和其他一些属性,具体应用可以根据自己的实际需要进行修改。

其中比较关键的属性设置el-menu中的‘default-active’,这个属性就是当前处于激活状态选项栏的index,只要生成的el-menu-item中的index属性与其匹配上就把此选项高亮。

所以只需要把el-menu中的‘default-active’设置为当前网址的路径,即this.$route.path,然后把el-menu-item中的index属性设置为该选项对应的路由路径,就能实现页面跳转后,侧边栏对应选项高亮。

子级菜单也是一样,只要把子级菜单的路径配置给对应el-menu-item的index属性,也能实现相同功能。

 

element 侧边栏宽度的手动缩放功能 element ui 侧边栏菜单,element 侧边栏宽度的手动缩放功能 element ui 侧边栏菜单_elementui_03,第3张

  参考文档:Element - The world's most popular Vue UI framework


https://www.xamrdz.com/web/2gp1926593.html

相关文章: