LayUI 表格操作列 按钮动态展示

实现方法:

<script type="text/html" id="table-operation">
    {{#  if(d.orderStatus == '1'){ }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="list">
            <i class="layui-icon layui-icon-about"></i>列表</a>

        {{#  if(d.payType == '1'){ }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="detail">
            <i class="layui-icon layui-icon-edit"></i>详情</a>
        {{#  } else  if(d.payType =='2'){ }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>编辑</a>
        {{#  } }}

    {{#  } }}

</script> 
// js 模块中
toolbar 和ID相关联 , {title: '操作', minWidth: 200, align: 'center', fixed: 'right', toolbar: '#table-operation'}

鉴于&& 等号解析时错误,第二种 方法

<![CDATA[
  {{# if(d.orderStatus == '1' && d.payType == '1' && d.payStatus == "0"){ }} ]]>
           <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="detail"><i
                class="layui-icon layui-icon-edit"></i>详情</a>
{{# }  }}

<![CDATA[ {{#  if(d.payType != '1'){ }}
    {{#  if(d.orderStatus =='2' || d.orderStatus =='4' || d.orderStatus =='5'){ }}  ]]>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="list"><i
            class="layui-icon layui-icon-about"></i>列表</a>
    {{#  } }}
{{#  } }}

层次分析

第一种情况:

{{# if(条件1){ }}
  //
{{# } }}


第二种情况
{{# if(d.payType == '1'){ }}
  //
{{# } else if(d.payType =='2'){ }}
  //
{{# } }}

第三种情况
{{# if(d.orderStatus == '1'){ }}
  //
  {{# if(d.payType == '1'){ }}
    //

  {{# } else if(d.payType =='2'){ }}
    //

  {{# } }}

{{# } }}

end

posted @ 2021-01-27 00:03  ysloong  阅读(909)  评论(0编辑  收藏  举报