标签：el render index menu item subMenuName operation icon
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div id="app"></div>
</body>
<script src="./vue-develop.js"></script>
<script src="./index.js"></script>
<script>
const app = new Vue({
name: 'SideMenu',
data() {
return {
menus: [
{
menuName: '江苏省',
index: 'jiangsu',
icon: 'el-icon-s-management',
isShow: true,
subMenus: [
{ subMenuName: '南京市', index: 'nanjing', icon: 'el-icon-s-operation' },
{ subMenuName: '苏州市', index: 'suzhou', icon: 'el-icon-s-operation' },
{ subMenuName: '无锡市', index: 'wuxi', icon: 'el-icon-s-operation' }
]
},
{
menuName: '浙江省',
index: 'zhejiang',
icon: 'el-icon-s-opportunity',
isShow: true,
subMenus: [{ subMenuName: '杭州市', index: 'hangzhou', icon: 'el-icon-s-operation' }]
},
{
menuName: '上海市',
index: 'shanghai',
icon: 'el-icon-lock',
isShow: true,
subMenus: []
},
{
menuName: '河南省',
index: 'henan',
icon: 'el-icon-download',
isShow: true,
subMenus: [
{ subMenuName: '郑州市', index: 'zhengzhou', icon: 'el-icon-s-operation' },
{ subMenuName: '开封市', index: 'kaifeng', icon: 'el-icon-s-operation' },
{ subMenuName: '洛阳市', index: 'luoyang', icon: 'el-icon-s-operation' }
]
},
{
menuName: '北京市',
index: 'beijing',
icon: 'el-icon-setting',
isShow: true,
subMenus: [{ subMenuName: '北京市', index: 'beijing', icon: 'el-icon-s-operation' }]
}
]
};
},
props: {
active: {
type: [Number, String],
default: ''
},
opened: {
type: Array,
default: () => []
}
},
methods: {
selectMenu(item) {
console.log(item)
}
},
render(h) {
return h(
'div',
{
style: {
height: '100%',
width: '201px'
}
},
[
h(
'el-menu',
{
props: {
'default-active': this.active,
'default-openeds': this.opened,
'background-color': '#236eee',
'text-color': '#fff',
'active-text-color': '#ffd04b'
},
on: {
select: this.selectMenu
}
},
[
this.menus.map(item => {
if (item.isShow) {
if (item.subMenus.length == 0) {
return h(
'el-menu-item',
{
props: {
index: item.index
}
},
[h('i', { class: item.icon, style: { color: '#fff' } }), h('span', item.menuName)]
);
} else {
return h(
'el-submenu',
{
props: {
index: item.index
}
},
[
h(
'template',
{
slot: 'title'
},
[h('i', { class: item.icon, style: { color: '#fff' } }), h('span', item.menuName)]
),
h('el-menu-item-group', [
item.subMenus.map(sub => {
return h(
'el-menu-item',
{
props: {
index: sub.index
}
},
[h('i', { class: sub.icon, style: { color: '#fff' } }), h('span', sub.subMenuName)]
);
})
])
]
);
}
}
})
]
)
]
);
}
}).$mount('#app');
</script>
</html>
标签：el,render,index,menu,item,subMenuName,operation,icon 来源： https://www.cnblogs.com/jwyblogs/p/14692426.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。