Vue2.x-使用render函数动态渲染el-menu
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue2.x-使用render函数动态渲染el-menu，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2372字，纯文字阅读大概需要4分钟。
内容图文
代码：
<!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>
内容总结
以上是互联网集市为您收集整理的Vue2.x-使用render函数动态渲染el-menu全部内容，希望文章能够帮你解决Vue2.x-使用render函数动态渲染el-menu所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】