Layui 前端通过异步AJAX 调用接口将数据到Table中，代码如下：
<div class="layui-form"> <table id="table" lay-filter="menu"></table> </div>
这里使用Layui结合Thymeleaf模板引擎渲染页面，其中permission变量是用户权限列表，由后台Java提供，如果做全后端分离，其原理也一样后台通过接口提供权限列表，代码如下：
<script th:inline="javascript" type="text/html" id="bartool"> <a th:if="${#lists.contains(permissions, ‘admin:menu:edit‘)}" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit"> <i class="layui-icon layui-icon-edit"></i>编辑 </a> <a th:if="${#lists.contains(permissions, ‘admin:menu:delete‘)}" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del"> <i class="layui-icon layui-icon-delete"></i>删除 </a> </script>
当没有编辑、删除按钮权限的时候操作栏是空白的，比较难看，产品希望没有按钮权限的时候隐藏Table中的”操作栏“，于是通过Layui官网发现，cols中有个hide参数，可以控制列的显示，
于是通过判断toolbar中是否有按钮来判断"操作栏"的动态显示，代码如下：
<script th:inline="javascript" type="text/javascript" layout:fragment="footer"> layui.use([‘jquery‘, ‘form‘, ‘layer‘, ‘table‘], function() { var table = layui.table, $ = layui.jquery, search = window.location.search; var toolbar = $.trim($("#bartool").html())=="" ? true : false; table.render({ elem: ‘#table‘, url: ‘/admin/menu/data‘ + search, limit: 15, page: true, toolbar: "#toolbar", defaultToolbar: [], cols: [[ // {type: ‘numbers‘, title: ‘序号‘, width:‘5%‘}, {field: ‘menu_name‘, title: ‘菜单名称‘, width: ‘10%‘}, {field: ‘url_type‘, title: ‘菜单类型‘, width:‘10%‘, templet: function (row) { if(row.url_type==1) { return "模块"; } if(row.url_type==2) { return "菜单"; } if(row.url_type==3) { return "按钮"; } }}, {field: ‘status‘, title: ‘状态‘, width:‘15%‘, templet: function (row) { return row.status==1?"启用":"禁用"; }}, {field: ‘url‘, title: ‘菜单路劲‘, width: ‘15%‘}, {field: ‘sort‘, title: ‘排序‘, width: ‘15%‘}, {field: ‘permission‘, title: ‘权限标识‘}, {align: ‘center‘, title: ‘操作‘, toolbar: ‘#bartool‘, hide: toolbar}, ]] }); }); </script>