element ui el-menu组件

m0_63466615

已于 2022-07-01 16:47:24 修改

阅读量3.4k

点赞数 1

文章标签： elementui vue.js javascript

于 2022-02-10 17:40:54 首次发布

本文链接：https://blog.csdn.net/m0_63466615/article/details/122865435

版权

本文详细介绍了如何使用Vue.js结合Element UI库创建动态路由菜单。内容包括：菜单组件的嵌套结构，使用<el-menu-item>和<el-submenu>创建菜单项，设置router属性和index激活路由，以及动态加载菜单数据。同时，提供了相关的CSS样式调整，如改变背景色、文本颜色等，并展示了如何从API获取并渲染菜单数据。

摘要由CSDN通过智能技术生成

1.组件需要先写在<el-menu></el-menu>里面

2.一点此单就能显示东西或进入路由的就用

<el-menu-item></el-menu-item>实现

3.点了展开下一级菜单的要写在

<el-submenu>

<el-menu-item></el-menu-item>

</el-submenu>

当el-menu设置router属性时，需要在el-menu-item和el-sunmenu里面写index

index的值必须是字符串，所以在

<el-submenu :index="index.toString()">这一句，需要把它转化成字符串

常用是属性

background-color：设置导航菜单的背景颜色（默认值：#ffffff），可以取值为transparent（透明）。

text-color：设置导航菜单的文本颜色。

mode：设置导航菜单的摆放方式，默认值：vertical（垂直的），还可以取值为horizontal（水平的）。

router：设置是否开启路由模式，若开启该模式，则<el-menu-item>的index属性需要指定路由地址。

default-active：设置默认被激活的路由。

collapse-transition：设置子菜单是否具备折叠动画。

active-text-color：设置当前激活菜单项的文本颜色。

unique-opened：设置是否只允许有一个子菜单处于展开状态。

有关导航菜单的CSS样式类：

（1）去掉垂直导航菜单右侧默认的竖线：若是水平方式放置的导航栏菜单是下方默认的横线。

.el-menu{ border-right:none; }

（2）鼠标经过菜单项：

.el-menu-item:hover

（3）鼠标经过子菜单的标题文本：

>>.el-submenu__title:hover（这里是两个下划线）

（4）当前被激活菜单项：

.el-menu-item.is-active

（5）子菜单中的菜单项：

.el-submenu .el-menu-item

4.如果动态生成菜单项

<template>
  <div class="myMenu">
    <el-menu
        background-color="transparent"
        text-color="#ffffff"
        router
        active-text-color="#ffffff"
    >
      <template v-for="(item,index) in menuData">
        <template v-if="item.children">
          <el-submenu :index="index.toString()">
              <template slot="title"><i :class="item.icon"></i>{{item.permissionName}}</template>
            <template v-for="(child,index2) in item.children">
                <el-menu-item :index="`/successPage/${child.path}`">{{child.permissionName}}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="`/successPage/${item.path}`"><i :class="item.icon"></i>{{item.permissionName}}</el-menu-item>
        </template>
      </template>

    </el-menu>
  </div>
</template>

<script>
/*
mapState里面的内容
export default {
    userInfo:{}
}
multations里面的内容
export default {
    setUserInfo(state,payload){
        state.userInfo=payload
        state.userInfo.expiresTime=new Date().getTime()+payload.expires*1000
    }
}
* */
import {mapState} from 'vuex'
export default {
  name: "myMenu",
  data(){
    return{
      menuData:[]
    }
  },
  computed:{
    ...mapState(['userInfo'])
  },
  mounted(){
    let url='/api/getRouter.jsp';
    let data={
      params:{
        permissionIds:this.userInfo.permission
      }
    }
    this.$axios.get(url,data).then(res=>{
      if (res.data.code===200){
        this.menuData=res.data.data
      }
    })
  }
}
</script>

<style scoped>
.el-menu{
  border-right:none
}
>>>.el-submenu__title{
  color:#ffffff;
}
.el-menu-item.is-active,
>>>.el-submenu__title:hover,
.el-menu-item:hover{
  background-color: #197199 !important;
}
.el-submenu .el-menu-item{
  text-indent: 20px;
}
</style>

userInfo的数据