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.效果
本文由:xiaoshu168 作者:xiaoshu发表,转载请注明来源!