# 表格工具栏 ## 5.4.表格工具栏 | 类名（class） | 说明 | | --- | --- | | toolbar | 调整表格上面的表单间距使之更好看 | | w-auto | 设置width:auto，用于重置一些有固定宽度表单元素 | | mr0 | 设置margin-right:0，用于重置一些表单元素的样式 | | form-search-show-expand | 点击了展开才显示出来 | | form-search-expand | 表格搜索栏展开\\折叠按钮默认样式 | ~~~ <!-- 表格顶部工具栏区域 --> <div class="layui-form toolbar"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label w-auto">账&emsp;号：</label> <div class="layui-input-inline mr0"> <input name="username" class="layui-input" type="text" placeholder="输入账号"/> </div> </div> <!-- 加了form-search-show-expand类在展开的时候才显示 --> <div class="layui-inline form-search-show-expand"> <label class="layui-form-label w-auto">用户名：</label> <div class="layui-input-inline mr0"> <input name="nickName" class="layui-input" type="text" placeholder="输入用户名"/> </div> </div> <div class="layui-inline"> <button class="layui-btn icon-btn" lay-filter="formSubSearchUser" lay-submit> <i class="layui-icon">&#xe615;</i>搜索 </button> <!-- 添加这个按钮可展开/折叠表单 --> <a class="layui-btn form-search-expand" search-expand> 展开 <i class="layui-icon layui-icon-down"></i> </a> </div> </div> </div> <!-- 表格 --> <table id="tableUser" lay-filter="tableUser"></table> ~~~  移动端自动适配效果：  **表格搜索折叠/展开事件监听：** ~~~ <!-- 直接写js --> <a class="layui-btn" search-expand="d.expand?layer.msg('展开了'):layer.msg('折叠了')"> 展开 <i class="layui-icon layui-icon-down"></i> </a> <!-- 调用方法 --> <a class="layui-btn" search-expand="onExpandChange(d)"></a> <script> layui.use(['layer'], function () { window.onExpandChange = function(d){ console.log(d); // d包含d.expand，d.elem } }); </script> ~~~