layui导航栏二级菜单不显示

layui导航栏二级菜单不显示

问题描述

在使用layui 中的导航栏组件时,除了 默认打开的第一个,其他的导航只能显示出一级的导航,

原因

查看layui 的官方文档,可以发现layui 的导航目录时依赖于element 的,所以我们需要创建一个element

解决方法

创建layui 下的element 即可

示例代码

  1. Vue 项目中:
 <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed">
              <a _href='#'>
                <i class="layui-icon layui-icon-home"></i>
                <cite>首页</cite>
              </a>
              <dl class="layui-nav-child">
                <dd>
                  <a  _index="0">项目介绍</a>
                </dd>
                <dd>
                  <a  _index="1">分析页</a>
                </dd>               
              </dl>
            </li>
            <li class="layui-nav-item">
              <a _href='#' v-on:click="chufa">
                <i class="layui-icon layui-icon-set-fill"></i>
                <span>系统管理</span>
              </a>
              <dl class="layui-nav-child">
                <dd>
                  <a href="javascript:;">用户管理</a>
                </dd>
                <dd>
                  <a href="javascript:;">角色管理</a>
                </dd>
                <dd>
                  <a href="javascript:;">菜单管理</a>
                </dd>
                <dd>
                  <a href="javascript:;">登录日志</a>
                </dd>
              </dl>
            </li>
          </ul>
  1. 需要添加的代码如下:
    1. 在当前Vue 文件的mounted钩子函数中添加以下的代码:
    mounted() {
    this.$nextTick(() => {
      //导航栏依赖于 element 因此下面的代码是必须的否则二级导航内容就会不显示
      layui.use("element", function() {
        var element = layui.element;
      });    
    });
    

},
```

结果对比

  1. 没加代码之前
    在这里插入图片描述
  2. 加上代码之后:
    在这里插入图片描述

个人工作中不断总结记录,也希望有这个疑惑的人从中找到解决方法

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值