# 表格工具欄 ## 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> ~~~