Vue2.x-使用render函数动态渲染el-menu
代码：
<!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>
