Vue2.x-使用render函数动态渲染el-menu

2021/4/23 10:30:58
编程Tag： icon render item menu index el subMenuName operation
本文主要是介绍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>
这篇关于Vue2.x-使用render函数动态渲染el-menu的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
Vue2.x-使用render函数动态渲染el-menu

相关编程文章
