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>

2. 需要添加的代码如下：
   1. 在当前Vue 文件的mounted钩子函数中添加以下的代码：

   mounted() {
   this.$nextTick(() => {
     //导航栏依赖于 element 因此下面的代码是必须的否则二级导航内容就会不显示
     layui.use("element", function() {
       var element = layui.element;
     });    
   });
   

},
```

结果对比

1. 没加代码之前
   
2. 加上代码之后：
   

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