html列表循环el,element-ui的navMenu使⽤v-for循环渲染不同
⼦标签。。。
简单记录
1.简介
2.上代码
2.1html代码
2.1.1原理
2.2 js代码
3.树型组件实现
4.结语
1.简介
作为⼀个合格的全栈开发者，前端的常⽤技术肯定不能落下。在深度了解了原⽣HTML5、CSS3和JavaScript(ES5和ES6)之后，前端的三⼤马车(Vue、React、Angular)⾄少要会⼀个吧，国内使⽤Vue⽐较多，Vue是⼀个轻量级的框架，组件化和MVVM的思想的应⽤使得Vue在性能和项⽬管理上都有⽐较明显的优势，同时，丰富的NodeJS插件和Vue插件也使得我们开发的效率⼤⼤提⾼。
本⽂所说的就是Vue中使⽤element-ui的⼀个⼩技巧，关于navMenu的v-for渲染的。默认本⽂读者都是对Vue和element-ui有所了解的。
友情链接：
Vue官⽹
element-ui官⽹
2.上代码
element-ui中关于navMenu的组件主要是这⼏个(el-menu、el-submenu、el-menu-item-group、el-menu-item)，⽤法参考官⽹的例⼦。
element.eleme/#/zh-CN/component/menu
在我的需求，我没有⽤到el-menu-item-group，只⽤到了另外三个。最终想要实现的效果如图所⽰：
接下来直接上代码：
2.1html代码
{{value.title}}
{{v.title}}
2.1.1原理
组件el-menu-item和el-submenu的props⼏乎是⼀样的，也就是都可以通过v-on指令(简写为 : 号)来绑
定属性index，并且el-submenu的slot写法是可以兼容el-menu-item的⽰例如下：
导航⼀
导航⼆
导航⼆
template是vue中⼀个⽐较神奇的标签，component和transition、transiton-group则是vue官⽅⾃带的神奇的组件，这⾥只⽤到了component。具体来说：⼀、template是⼀个虚拟的节点，它在真实的浏览器DOM树中不存在，但是却存在于Vue的虚拟DOM树中，可以⽤来把⼀个或多个标签包裹起来当成⼀个整体去使⽤v-if等指令；⼆、component是⼀个专门⽤来实现动态组件的组件，改变它props中的is属性就可以改变component中实际具体显⽰的组件内容。具体解释参考看vue官⽹学习⽂档中组件-插槽、组件-动态组件等内容。
el-submenu和el-menu-item中props的index属性都必须赋值为字符串，并且每⼀个index都必须是唯⼀的不能重复，不过el-submenu的index属性只⽤作标志，即使设置了router也不会跳转，因此可以随便写点啥，下⾯的js中有⽰例。(重复的index会导致点击动作异常)
2.2 js代码
export default {
data(){
return {
leftMenu:{
isCollapse: false,
navList: [{
icon: 'el-icon-document',
title: '订单管理',
url: '/OrderManage'
},{
icon: 'el-icon-dish',
title: '菜单管理',
url: '/ProductManage'
},{
icon: 'el-icon-suitcase',
title: '店铺管理',
url: 'suibianxie'
children: [{
icon: 'el-icon-tickets',
title: '店铺资料',
url: '/StoreProfile'
},{
icon: 'el-icon-picture-outline',
title: '轮播图管理',
url: '/BannerPicture'
},{
icon: 'el-icon-s-grid',
title: '桌台管理',
url: '/TableManage'
}]
},{
icon: 'el-icon-setting',
title: '账号管理',
url: '/AccountManage'
},{
icon: 'el-icon-user',
title: '个⼈资料',
url: '/PersonProfile'
}]
}
}
}
}
这⾥都⽐较好懂。
leftMenu.navList是⽤来存放导航菜单数据的数组，数组的直接⼦成员都是对象，对象的icon属性我⽤的是element-ui⾃带的icon类，url 属性中对应的路径我都已经在vue-router中做了对应的配置。
数组直接⼦成员带有children字段的，会被渲染成el-submenu，设置其props中的index属性为不重复的任意字符串，其他直接⼦成员会被渲染成el-menu-item，设置其props中的index属性为对应的url。
注意：el-menu中所有的url路径都要全部是有效的vue-router路径，否则el-menu的点击事件⽆法正常⼯作哦。
3.树型组件实现
上⾯的案例只考虑了⼀级菜单和⼆级菜单，因为⼀般的导航菜单都直到⼆级，很少会有更深的层级，如果我们要钻⽜⾓尖，实现树状的el-menu渲染，那也可以，因为是⽐较⼩众的内容，这⾥就不解释了，直接上代码，如果你有兴趣还可以对这个组件进⾏进⼀步封装，把el-menu-item-group的兼容也加上，精益求精(将钻⽜⾓尖进⾏到底@_@)，这⾥就只做树型渲染的⽰范：
树状渲染需要单独封装⼀个组件，这⾥我在src/components/中新建了⼀个NavMenu.vue⽂件，内容如下：
{{value.title}}
组件写好之后，调⽤的代码如下：
import NavMenu from '@/components/NavMenu.vue';
export default {
components: {NavMenu}, data(){
return {
userInfo:{
username: '',
},
leftMenu:{
isCollapse: false,
navList: [{
icon: 'el-icon-document', title: '订单管理',
url: '/OrderManage'
},{
icon: 'el-icon-dish',
title: '菜单管理',
url: '/ProductManage'
},{
icon: 'el-icon-suitcase',
title: '店铺管理',
url: "suibianxie",
children: [{
icon: 'el-icon-tickets',
title: '店铺资料',
url: '/StoreProfile'
},{
icon: 'el-icon-picture-outline', title: '轮播图管理',
url: '/BannerPicture'
},{
icon: 'el-icon-s-grid',
title: '桌台管理',
url: '/TableManage'
},{
icon: 'el-icon-s-grid',
title: '测试',
url: "suibianxie2",
children: [{
icon: 'el-icon-s-grid',
title: '测试1',
vue element admin
url: '/TableManage'
}]
}]
},{
icon: 'el-icon-setting',
title: '账号管理',
url: '/AccountManage'
},{
icon: 'el-icon-user',
title: '个⼈资料',
url: '/PersonProfile'
}]
}
}
}
}
注意：
el-submenu组件props的index属性可以随便写，但是必须唯⼀，所以上⾯就出现了url:'suibianxie’和url:'suibianxie2’这种语法
定义Vue组件并export时设置name为驼峰命名法如NavMenu，在使⽤组件时NavMenu和nav-menu这两种⽤法都是允许的，具体参加vue官⽅⽂档组件-组件注册中的命名规范。
效果图：
4.结语

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。