rendering

Prepare knowledge

Understand the v - bind ="$attrs"And v - on ="$listeners"
Copy the code

www.cnblogs.com/yuzhongyu/p…

Use the code

  • AppMenu.vue
    // AppMenu.vue
    // Use of the sidebar<template> <div> <a-menu mode="inline" theme="dark" :forceSubMenuRender="true" :inlineIndent="10" > <template v-for="item in menuList"> <a-menu-item v-if="! item.children" :key="item.id" @click="itemTick(item.id)" > <a-icon v-if="item.icon" :component="item.icon"/> <span>{{ item.menuName }}</span> </a-menu-item> <sub-menu v-else :menu-info="item" :key="item.id" @titleClick="titleClick" @itemTick="itemTick" > </sub-menu> </template> </a-menu> </div> </template> <script> import { Menu, Icon } from 'ant-design-vue' import burialDesign from "@/assets/picture/icon_burial_design.svg? component"; import SubMenu from './SubMenu.vue'; export default { name: 'AppMenu', components: { 'a-menu': Menu, 'a-sub-menu': Menu.SubMenu, 'a-menu-item': Menu.Item, 'a-icon': Icon, SubMenu }, data () { return { menuList: [ { children: [ { id: "menu2", menuName: "Tab22 ", path: "fault", pid: "menu1", children: [{id: "menu3", path: "fault", pid: "menu1", children: [{id: "menu3", path: "fault", pid: [{id: "menu3", path: "fault", pid: [ "Menu2 ",}]}], {children: [{id: "etl2", menuName: '11',}, {children: [{id: "etl2", menuName:' 11',}, {children: [{id: "etl2", menuName: "ETL22", path: "etl", pid: "etl1", children: [{ id: "etl3", menuName: "ETL33", path: "etl", pid: "etl2", children: [{ id: "etl4", menuName: "ETL44", path: "etll4", pid: "etl3", }] }] } ], icon: burialDesign, id: 'etl1', menuName: 'ETL11',}, {path: 'test', icon: burialDesign, id: 'test1', menuName: 'test 11',}, {children: [{id: "444444", menuName: "444", path: "44444", pid: "444", } ], icon: burialDesign, id: '444', menuName: '444', }, ] } }, }Copy the code
  • SubMenu.vue
<template> <a-sub-menu :key="menuInfo.id" v-bind="$props" v-on="$listeners" > <span slot="title"> <a-icon v-if="menuInfo.icon" :component="menuInfo.icon"/> <span>{{ menuInfo.menuName }}</span> </span> <template v-for="item in menuInfo.children"> <a-menu-item v-if="! item.children" :key="item.id" @click="tick(item.id)" > <a-icon v-if="item.icon" :component="item.icon"/> <span>{{ item.menuName }}</span> </a-menu-item> <sub-menu v-else :key="item.id" :menu-info="item" @titleClick="changeMenu" v-on="$listeners" /> </template> </a-sub-menu> </template> <script> import { Menu, Icon } from 'ant-design-vue' export default { name: 'SubMenu', // must add isSubMenu: true isSubMenu: true, // $props.isSubMenu props: { ... Menu.SubMenu.props, // // Cannot overlap with properties within Menu.SubMenu.props menuInfo: { type: Object, default: ()=> {} }, selectedKeys: { type: Array, default: ()=> [] } }, components: { 'a-menu': Menu, 'a-sub-menu': Menu.SubMenu, 'a-menu-item': Menu.Item, 'a-icon': Icon }, methods: {// Click on the submenu title changeMenu(menu) {// console.log(' Expand menu===',menu) // console.log('selectedKeys===',this.selectedKeys) this.$emit('titleClick',menu); }, tick(id) { console.log('$listeners===',this.$listeners); console.log('$attrs===',this.$attrs); console.log('$props===',this.$props); / / the console. The log (id = = = ' 'the last layer, id) enclosing $emit (' itemTick' id); }}}; </script>Copy the code