本文解决layui导航栏二级菜单无法展开及layer关闭iframe失败的问题。针对导航栏，需在Vue mounted钩子中初始化element模块；针对layer，需使用parent.layer.getFrameIndex获取索引并关闭。
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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >用户管理</a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >角色管理</a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜单管理</a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录日志</a>
</dd>
</dl>
</li>
</ul>2. 需要添加的代码如下：
在当前Vue文件的mounted生命周期钩子中添加以下代码：
mounted() {
this.$nextTick(() => {
//导航栏依赖于 element 因此下面的代码是必须的否则二级导航内容就会不显示
layui.use("element", function() {
var element = layui.element;
});
});结果对比
1. 未添加代码前的效果
2. 添加代码后的效果：
layui中的一些问题
使用layui（版本号2.4.5），在引入js和css文件后：
水平导航栏的二级菜单一直无法显示。
<script>
layui.use('element', function(){
var element = layui.element;
element.on('nav(filter)', function(elem){
console.log(elem); //得到当前点击的DOM对象
});
});
</script>解决办法：最终发现layui.all.js的引入位置不能放在head标签内，必须将其放置在body标签的最后位置才能生效。
使用layer.open中的iframe弹框，关闭失败的问题
最初的解决办法，参考官网示例：即
var index = layer.open({
……
});
layer.close(index)；/ layer.closeAll()但是使用这两种方法发现始终无法关闭，后来再仔细阅读官方文档时发现，关闭iframe需要使用下面的方法
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭 最后测试完美解决
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。