AntDesignVue动态创建下拉菜单

最近项目需要，有需要动态创建下拉菜单的需求，特此记录一下。

vue版本：3.1.4

ant-design-vue版本：2.1.6

需求是下拉菜单项可以根据配置来控制是否显示，那么就需要用到 v-for 和 v-if 的结合。

v-for 和 v-if 是不能同时应用到元素上面的，所以需要用 template 来承载 v-for，代码如下：

<a-dropdown v-if="moreButtons.length > 0">
  <a-button type="primary" @click.prevent>…a-button>
  <template #overlay>
    <a-menu @click="dropdownMenuItemClick">
      <template v-for="controlItem in moreButtons">
        <a-menu-item v-if="controlItem.show" :key="controlItem.name">
          {{ controlItem.text }}
        a-menu-item>
      template>
    a-menu>
  template>
a-dropdown>

下面的写法也是可以的，v-if 也放到一个单独的template中

<a-dropdown v-if="moreButtons.length > 0">
  <a-button type="primary" @click.prevent>…a-button>
  <template v-for="controlItem in moreButtons">
    <template v-if="controlItem.show">
      <a-menu-item :key="controlItem.name">{{ controlItem.text }}a-menu-item>
    template>
  template>
a-dropdown>

需要注意的一点，如果是结合 v-if 判断的话，key 一定要绑定在 a-menu-item 元素上！！！

如下面的代码，虽然可以正常动态显示菜单，但是在点击菜单项项的时候，拿到的 key 都是0。

<a-dropdown v-if="moreButtons.length > 0">
  <a-button type="primary" @click.prevent>…a-button>
  <template #overlay>
    <a-menu @click="dropdownMenuItemClick">
      <template v-for="controlItem in moreButtons" :key="controlItem.name">
           <a-menu-item v-if="controlItem.show">{{ controlItem.text }}a-menu-item>
      template>
    a-menu>
  template>
a-dropdown>

分别点了“按钮1”和“按钮3”，输出的key都是0

 正常应该是点击哪一个按钮，就输出哪一个按钮的key。

如下：

点击“按钮1”，输出的key是 “button1”

点击“按钮3”，输出的key是 “button3”

如果不需要结合 v-if 判断的话，key可以绑定在template上；或者直接去掉template，在a-menu-item上直接 v-for

部分代码如下：

<a-dropdown
  v-if="contextMenuItems.length > 0 || moreContextMenuItems.length > 0"
  :trigger="['contextmenu']"
>
  <template #overlay>
    <a-menu @click="contextMenuItemClick">
      
      <a-menu-item v-for="menuItem in contextMenuItems" :key="menuItem.name">
        {{ menuItem.text }}
      a-menu-item>
      <a-sub-menu v-if="moreContextMenuItems.length > 0" key="moreMenus" title="更多...">
      
        <template v-for="menuItem in moreContextMenuItems" :key="menuItem.name">
          <a-menu-item>{{ menuItem.text }}a-menu-item>
        template>
      a-sub-menu>
    a-menu>
  template>
a-dropdown>

完整代码如下：

 
<template>
  <a-dropdown v-if="moreButtons.length > 0">
    <a-button type="primary" @click.prevent>…a-button>
    <template v-for="controlItem in moreButtons">
      <a-menu-item v-if="controlItem.show" :key="controlItem.name">
      {{ controlItem.text }}
      a-menu-item>
    template>
  a-dropdown>
template>