Cómo generar dinámicamente el componente de menú de antd vue

Tabla de contenido

1. Antecedentes de la demanda:

2. Solución:

3. Ejemplo de código:

---

 

1. Antecedentes de la demanda:

El componente de menú vertical debe generarse dinámicamente, y el menú de primer nivel de la fuente de datos puede contener o no el submenú de segundo nivel. La dificultad radica en que la inclusión o no del submenú determina si generar el componente <a-menu-item> o el componente <a-sub-menu>, lo que trae dificultad al desarrollo. Y v-if, v-else y otros juicios condicionales en la vista previa de la plantilla de vue no pueden aparecer en la misma etiqueta de nivel que el bucle v-for.

2. Solución:

Haga un buen uso de la etiqueta de la plantilla, coloque el bucle v-for en la etiqueta de la plantilla y luego use la declaración v-if, v-else para determinar si contiene un submenú y decidir si generar <a-menu-item> o <a-sub-menu>

3. Ejemplo de código:

plantilla plantilla

<a-menu
          :default-selected-keys="['1']"
          :open-keys="openKeys"
          mode="inline"
          :selected-keys="[current]"
          @click="handleClick"
          @openChange="onOpenChange"
        >
            <template v-for="item in menus">
                <a-menu-item v-if="!item.children" :key="item.key">
                    <a-icon style="margin-right: 8px; font-size: 12px" :type="item['icon-type']" />
                    <span style="font-weight: 500; font-size: 14px">{
   
   { item.label }}</span>
                </a-menu-item>
                <a-sub-menu v-else :key="item.key">
                    <div slot="title">
                        <ops-icon style="margin-right: 8px; font-size: 12px" :type="item['icon-type']" /><span
                            style="font-weight: 500; font-size: 14px"
                            >{
   
   { item.label }}</span
                        >
                    </div>
                    <a-menu-item v-for="childItem in item.children" :key="childItem.key">
                        <a-icon style="margin-right: 8px; font-size: 12px" :type="childItem['icon-type']" />
                        <span style="font-weight: 500; font-size: 14px">{
   
   { childItem.label }}</span>
                    </a-menu-item>
                </a-sub-menu>
            </template>

codigo js

data() {
    return {
      collapsed: false,
      current: '1',
      rootSubmenuKeys: ['sub1', 'sub2'],
      openKeys: ['sub1'],
      menus: [
        {
          key: '1',
          'icon-type': 'zhujiqiang',
          label: '一级菜单 1',
        },
        {
          key: '2',
          'icon-type': 'zhujijiankong',
          label: '一级菜单 2',
        },
        {
          key: '3',
          'icon-type': 'wangluotuobu',
          label: '一级菜单 3',
        },
        {
          key: '4',
          'icon-type': 'wodekanban',
          label: '一级菜单 4',
        },
        {
          key: 'sub1',
          'icon-type': 'wangyexingneng',
          label: '一级菜单 5',
          children: [
            {
              key: '5',
              'icon-type': 'gailan',
              label: '二级菜单 5-1',
            },
            {
              key: '6',
              'icon-type': 'xingnengpinggu',
              label: '二级菜单 5-2',
            },
            {
              key: '7',
              'icon-type': 'yuansuxingneng',
              label: '二级菜单 5-3',
            },
          ],
        },
        {
          key: 'sub2',
          'icon-type': 'wangzhanjiankong',
          label: '二级菜单 6',
          children: [
            {
              key: '8',
              'icon-type': 'zonglan',
              label: '二级菜单 6-1',
            },
            {
              key: '9',
              'icon-type': 'shishizhuangtai',
              label: '二级菜单 6-1',
            },
            {
              key: '10',
              'icon-type': 'tongji',
              label: '二级菜单 6-1',
            },
          ],
        },
      ],
    }
methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed
    },
    handleClick(e) {
      console.log('click ', e)
      this.current = e.key
    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find((key) => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
  },

El efecto final es el siguiente: