技術標籤：layuihtml

layui按鈕，根據表單行資料的狀態值，來隱藏和顯示

實現效果如下：

主要前端程式碼：`

  <script type="text/html" id="tableBar">
                       {{#  if(d.headStatus == '新建(未稽核）'){ }}
                       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="look"
 
 sec:authorize="hasRole('ROLE_AssetHeadEdit')">
                           <i class="layui-icon">詳情</i></a>
                       <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit" sec:authorize="hasRole('ROLE_AssetHeadEdit')"
 
>
                           <i class="layui-icon">修改</i></a>
                       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" sec:authorize="hasRole('AssetHeadDel')">
                           <i class="layui-icon"
 
>刪除</i></a>
                       <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view" sec:authorize="hasRole('ROLE_AssetHeadView')">
                           <i class="layui-icon">稽核</i></a>
                       {{#  } else if(d.headStatus == '稽核完畢（未領用）'){ }}
                       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="look" sec:authorize="hasRole('ROLE_AssetHeadEdit')">
                           <i class="layui-icon">詳情</i></a>
                       <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="set" sec:authorize="hasRole('ROLE_AssetHeadSet')">
                           <i class="layui-icon">領用</i></a>
                       {{#  }else{ }}
                       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="look" sec:authorize="hasRole('ROLE_AssetHeadEdit')">
                           <i class="layui-icon">詳情</i></a>
                       <a class="layui-btn layui-btn-normal layui-btn-xs" ><i class="layui-icon">已完成</i></a>
                       {{#  } }}
                   </script>

d.headStatus == ‘新建(未稽核）’ 中的d 是layui前端獲取後端資料傳來的資料
其中前端獲取後端資料的方式，表單自動渲染資料：（如果沒有特別命名，那layui就自動定為d

 <table id="main_table" class="layui-table" lay-filter="main_table" lay-data="{id: 'main_table',url:'./queryNotUseList', toolbar: '#toolBar',page:true,height:'full-165',cellMinWidth:120}">
                 <thead>

                        <tr >
                            <th lay-data="{align:'center', toolbar:'#tableBar', minWidth:250}">操作</th> 
                             <th lay-data="{field:'tid', align:'center'}">編碼</th>
                            <th lay-data="{field:'userName', align:'center'}">人</th>   
                               <th lay-data="{field:'headStatus', align:'center'}">狀態</th>
                       </tr>
                       </thead>
                   </table>