elementui 可伸缩侧边栏_Vue 组件库Element布局容器动态生成侧边栏。

为了让大家可以继续看下去，代码展示效果我先给出来

https://htmlzhoyan.github.io/ElementUi/#/ele/elc/%E6%9D%83%E9%99%90%E7%AE%A1%E7%90%86

我这里要实现 Vue 2.0 的桌面端组件库Element中的侧边栏内容动态生成，换句话说，我并不知道侧边栏菜单里会有多少个子选项，所以我这样设计

目录结构如下：

vue布局

我这边使用了组件里面再次调用组件的方法。

所以 我这样先声明个组件 eleTemplate.vue

:key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name" :route="navMenu.entity.value">

{ {navMenu.entity.alias}}

:key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name">

{ {navMenu.entity.alias}}

export default {

name: 'NavMenu',

props: ['navMenus'],

data() {

return {}

},

methods: {}

}

a{

text-decoration:none

}

然后我在父组件里调用它，这里我使用了router-view来展示子路由里的页面效果，同时我为了实现路由进来的时候去触发侧边栏的指向，我在el-menu里添加了default-active

:default-active="isId"

@select="handleSelect"

class="el-menu-vertical-demo"

background-color="#F0F6F6"

text-color="#3C3F41"

active-text-color="#f60">

import config from './config'

import NavMenu from './eleTemplate';

export default {

data() {

return{

totalList:[],

isId:"权限管理"

}

},

methods: {

handleSelect(key,keyPath){

console.log(key,keyPath)

}

},

components: {

NavMenu

},

beforeRouteEnter (to, from, next) {

console.log("我从哪里来",to.params.id,from)

var self = this

next(vm=>{

vm.isId = to.params.id

})

},

watch:{

$route(to,from){

this.isId = to.params.id

}

},

created(){

this.totalList = config.childs

},

}

其中 我为了模拟数据，引入config