Layui框架利用dropdown插件实现下拉菜单

在开发过程中尤其是后台，有时候难免遇到对table表格或form表单的操作较多的情况。如果一一展示在<td>标签中难免影响视觉效果，因此本篇笔记主要记录如何利用dropdown插件实现下拉菜单。

首先看下效果：

dropdown插件官方效果演示及下载地址：http://test.microanswer.cn/page/dropdown.html

dropdown插件开发文档：https://www.microanswer.cn/blog/74

本演示案例HTML代码部分：

<td class="text-center" width="250px">
<span class="layui-dropdown" id="dropdown" data-value='id={$vo.id}'>
<a href="javascript:;" class="layui-dropdown-toggle" lay-filter="more" lay-dropdown="{showBy: 'hover',align:'left', templateMenu:'moreMenu'}">更多▼</a>
</span>
</td>
<script type="text/plain" id="moreMenu">
[
{if auth("/admin/device/index")}[{txt:"设备管理",event:"/admin/device/index"}]{/if}
{if auth("/admin/repaire/index")}[{txt:"维修管理",event:"/admin/repaire/index"}]{/if}
{if auth("/admin/keepfit/index")}[{txt:"保养管理",event:"/admin/keepfit/index"}]{/if}
{if auth("/admin/inspection/index")}[{txt:"巡检管理",event:"/admin/inspection/index"}]{/if}
{if auth("/admin/component/index")}[{txt:"部件管理",event:"/admin/component/index"}]{/if}
{if auth("/admin/spare/index")}[{txt:"备件管理",event:"/admin/spare/index"}]{/if}
{if auth("/admin/otherset/index")}[{txt:"其他设置",event:"/admin/otherset/index"}]{/if}
]
</script>
<script>
window.form.render();
window.laydate.render({range: true, elem: '#range-date', format: 'yyyy/MM/dd'});
layui.config({
base:"./static/plugs/layui/lay/modules/"
}).use(['dropdown','jquery','form'],function (){
const dropdown = layui.dropdown;
let $=layui.$;
dropdown.onFilter('more',function (event){
console.log(this);
//$.form.href(event, this);
})
})
</script>