and menu 导航菜单栏自定义标题新增图标 vue3

沙子迷了蜗牛眼

于 2024-03-14 16:24:52 发布

阅读量214

点赞数 9

文章标签：前端服务器 javascript

本文链接：https://blog.csdn.net/m0_73008551/article/details/136714494

版权

需求：自定义菜单导航栏的标题展示形式，右侧新增一个图标触发点击事件。

难点：官网API并没有解释清楚如何自定义使用插槽展示内部子项的展开，以及可能涉及多层的展示问题。以及论坛上各种千奇百怪的写法并不适配vue3对应的版本。

OK。废话不多说，展示数据结构，需要的子行赋值。

/**********************************开发不容易，关注再查看*********************************************/

     <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>