element ui 菜单右侧展开_Elementui Vue 菜单固定展开的问题

父组件

:default-active="activeMenu"

class="el-menu-vertical-demo"

background-color="#3a3f51"

text-color="#b5b6bd"

active-text-color="rgb(79, 148, 212)"

mode="vertical"

:collapse-transition="false"

:collapse="opened"

v-for="item in routes"

:key="item.path"

:item="item"

:basePath="item.path"

import SidebarItem from './SideBarItem'

import { mapGetters } from 'vuex'

export default {

components: { SidebarItem },

computed: {

...mapGetters(['routes', 'opened']),

activeMenu() {

return this.$route.path

}

子组件

v-if="

hasOnlyChild(item.children, item) &&

(!childItem.children || childItem.noChild)

v-for="child in item.children"

:key="child.path"

:item="child"

:basePath="resolvePath(child.path)"

import PageLink from './Link'

import { isAbsolutePath } from '@/utils/validate'

import path from 'path'

export default {

name: 'SidebarItem',

props: {

item: {

type: Object,

required: true

basePath: {

type: String,

default: ''

}

data() {

return {

childItem: null

}

methods: {

hasOnlyChild(children = [], item) {

// debugger

let newChildren = children.filter(obj => {

if (obj.hidden) {

return false

} else {

return true

}

})

if (newChildren.length === 1 && !item.meta) {

this.childItem = newChildren[0]

return true

}

if (newChildren.length === 0) {

this.childItem = { ...item, path: '', noChild: true }

return true

}

return false

resolvePath(router) {

if (isAbsolutePath(router)) {

return router

}

if (isAbsolutePath(this.basePath)) {

return this.basePath

}

return path.join(this.basePath, router)

}

components: {

PageLink

}

如何根据某种getter里取的权限值展开特定的菜单呢？

activeMenu 是路径

submenu 也是 :index="resolvePath(item.path)"

我看default-openeds参数传数组，但是索引已经被resolvePath(item.path)占用了。该怎么处理这个问题？

比如我拿到getter里的userType === '2' 然后固定展开某个submenu。

element ui 菜单右侧展开_Elementui Vue 菜单固定展开的问题相关推荐

Element UI样式修改之NavMenu导航菜单
目录 Element UI样式修改之NavMenu导航菜单一.成果展示二.步骤三.完整代码 Element UI样式修改之NavMenu导航菜单一.成果展示 Element UI官网给出的例子 ...
vue结合Element UI如何实现点击左侧菜单的折叠与展开
一.Element UI 中菜单的折叠与展开在Element UI中的官方文档中,在NavMenu 导航菜单中,在Menu Attribute 中,有一个 collapse 属性.它的作用是是否水平 ...
element ui 前台模板_用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员https://blog.csdn.net/crxk_blog.csdn.net 写在前面此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经搭建 ...
element ui table 中加下拉菜单
<el-table-column prop="roleList" label=角色 :width="180"> <templat ...
element ui 多个子组件_ElementUI 技术揭秘（2）组件库的整体设计
需求分析当我们去实现一个组件库的时候,并不会一上来就撸码,而是把它当做产品一样,思考一下我们的组件库的需求.那么对于 element-ui,除了基于 Vue.js 技术栈开发组件,它还有哪些方面的需 ...
element ui走马灯怎么添加_element-ui对话框与走马灯一起用
一.需求分析通过点击一组图片中的某一张图片,显示出当前的图片在对话框中,并可以通过走马灯的方式左右切换出其他图片,图片大小和对话框大小为自适应二.实现步骤 1.布局代码 :src="it ...
Element UI表格拖拽（vue中） —— 行拖拽、列拖拽
目录安装依赖 vuedraggable 实现拖拽的要点行拖拽要点列拖拽要点完整范例代码安装依赖 vuedraggable 安装 vuedraggable 的同时,会自动安装 sortabl ...
element ui分页怎么做_elementUI实现分页
分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但数据量不能太大,因为前端是先一次性加载所有数据, ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...

element ui 菜单右侧展开_Elementui Vue 菜单固定展开的问题

element ui 菜单右侧展开_Elementui Vue 菜单固定展开的问题相关推荐

最新文章

热门文章