layui table.render 根据条件显示不同的按钮,layui table根据条件显示,layui table根据条件判断

1.html

<div class="layui-card-body">
    <table class="layui-hide" id="wait1" lay-filter="tableList1"></table>
</div>

2.js

table.render({
      elem: '#wait1'
      ,skin: 'line'
      ,url:"{{route('applyment-shop-wait')}}"
      ,limit:20
      ,height:'full-200'
      ,method:'POST'
      ,id:'tableList1'
      ,cols: [[
           {field:'id',width:90, title: 'ID', sort: true, fixed: 'left'}
          ,{field:'shop_name', title: '门店名称'}
          ,{field:'merchant_name',  title: '营业执照名称'}
          ,{field:'mobile', title: '电话'}
          ,{field:'username', title: '姓名'}
          ,{field:'tname', title: '推广者'}
          ,{field:'status_str',  title: '审核状态'}
          ,{field:'applyment_state_msg',  title: '进件状态'}
          ,{field:'created_at', title: '创建时间'}
          ,{field:'wealth', width:300, title: '操作', fixed: 'right',templet:function (item) {
              switch (item.status) {
                  case 0:
                      return '<a class="layui-btn layui-btn-xs" lay-event="edit" >提交审核</a>'+
                             '<a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>'+
                             '<a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>';
                      break;
                  case 1:
                      return '<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" >发起分账设置</a>' +
                             '<a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>';
                      break;
                  default:
                      return '';
                      break;
              }
           }}
      ]]
     ,page: true
 });

3.js 参数介绍

#wait1  table的ID

url:"" 请求接口的地址根据自己的地址去写

id:'tableList1' table的lay-filter="tableList1"

field:接口返回的字段名称,width:宽度设置, title: 字段对应显示的标题, sort: true, fixed: 'left' 靠左显示

ftemplet:function (item) item为接口返回的每条数据根据数据的状态可以显示不同的按钮

4.效果