• 中文
  • 注册
    • 查看作者
    • antd VUE使用单文件方式递归生成导航菜单报错 Nuxt修改Vue为完整版

      <template>
        <div style="width: 256px">
          <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
            <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
          </a-button>
          <a-menu
            :default-selected-keys="['1']"
            :default-open-keys="['2']"
            mode="inline"
            theme="dark"
            :inline-collapsed="collapsed"
          >
            <template v-for="item in list">
              <a-menu-item v-if="!item.children" :key="item.key">
                <a-icon type="pie-chart" />
                <span>{{ item.title }}</span>
              </a-menu-item>
              <sub-menu v-else :key="item.key" :menu-info="item" />
            </template>
          </a-menu>
        </div>
      </template>
      <script>
      // recommend use functional component
      // <template functional>
      //   <a-sub-menu :key="props.menuInfo.key">
      //     <span slot="title">
      //       <a-icon type="mail" /><span>{{ props.menuInfo.title }}</span>
      //     </span>
      //     <template v-for="item in props.menuInfo.children">
      //       <a-menu-item v-if="!item.children" :key="item.key">
      //         <a-icon type="pie-chart" />
      //         <span>{{ item.title }}</span>
      //       </a-menu-item>
      //       <sub-menu v-else :key="item.key" :menu-info="item" />
      //     </template>
      //   </a-sub-menu>
      // </template>
      // export default {
      //   props: ['menuInfo'],
      // };
      import { Menu } from 'ant-design-vue';
      const SubMenu = {
        template: `
            <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners">
              <span slot="title">
                <a-icon type="mail" /><span>{{ menuInfo.title }}</span>
              </span>
              <template v-for="item in menuInfo.children">
                <a-menu-item v-if="!item.children" :key="item.key">
                  <a-icon type="pie-chart" />
                  <span>{{ item.title }}</span>
                </a-menu-item>
                <sub-menu v-else :key="item.key" :menu-info="item" />
              </template>
            </a-sub-menu>
          `,
        name: 'SubMenu',
        // must add isSubMenu: true
        isSubMenu: true,
        props: {
          ...Menu.SubMenu.props,
          // Cannot overlap with properties within Menu.SubMenu.props
          menuInfo: {
            type: Object,
            default: () => ({}),
          },
        },
      };
      export default {
        components: {
          'sub-menu': SubMenu,
        },
        data() {
          return {
            collapsed: false,
            list: [
              {
                key: '1',
                title: 'Option 1',
              },
              {
                key: '2',
                title: 'Navigation 2',
                children: [
                  {
                    key: '2.1',
                    title: 'Navigation 3',
                    children: [{ key: '2.1.1', title: 'Option 2.1.1' }],
                  },
                ],
              },
            ],
          };
        },
        methods: {
          toggleCollapsed() {
            this.collapsed = !this.collapsed;
          },
        },
      };
      </script>

      报错:
      [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

      导航菜单不能正常显示

      antd VUE使用单文件方式递归生成导航菜单报错 Nuxt修改Vue为完整版

      下面是解决方法



      隐藏内容需要付费才可以看见

      马上购买
    • 0
    • 0
    • 0
    • 0
    • 121
    • 请登录之后再进行评论

      登录
    • 做任务
    • 发表内容
    • 实时动态

    • 关于伊迪派 | 联系我们 | 免责声明 | 侵权投诉 | 小黑屋

      本站资源来源于互联网,仅供个人学习参考研究之用,请于下载后24小时内删除。
      如有侵犯您的权益,可通过邮件(admin@idepy.com)、站内通道等方式反馈,本网站将在第一时间处理。
      Copyright © 2019 - 2020 伊迪派(IDEPY), All Rights Reserved · 粤ICP备12030819号-6 · 粤公网安备 44132202100185号