antd 自定义a-menu

vily_luky

于 2024-05-10 14:12:33 发布

阅读量190

点赞数 3

文章标签： vue anti-design-vue

本文链接：https://blog.csdn.net/vily_luky/article/details/138664208

版权

     <a-menu
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        mode="inline"
        style="height: 100%; width: 100%; border-right: 0; overflow-y: auto"
        @open-change="onOpenChange"
      >
        <template v-for="item in menuList" :key="item.key">
          <template v-if="item.children">
            <a-sub-menu :key="item.key">
              <template #title>
                <span>{{ item.label }}</span>
              </template>
              <template v-for="child in item.children" :key="child.key">
                <template v-if="child.children">
                  <a-sub-menu :key="child.key">
                    <template #title>
                      <span>{{ child.label }}</span>
                      <i
                        @click.stop="addChildTable(child)"
                        class="iconfont icon-add"
                        style="float: right; margin: auto; font-size: 13px; font-weight: 600"
                      ></i>
                    </template>
                    <template v-for="subChild in child.children" :key="subChild.key">
                      <a-menu-item @click="handleClick(subChild)">{{ subChild.label }}</a-menu-item>
                    </template>
                  </a-sub-menu>
                </template>
                <template v-else>
                  <a-menu-item :key="child.key" @click="handleClick(child)">{{
                    child.label
                  }}</a-menu-item>
                </template>
              </template>
            </a-sub-menu>
          </template>
        </template>
      </a-menu>

参考原文：and menu 导航菜单栏自定义标题新增图标 vue3_<a-menu-item 加图标-CSDN博客