场景:列表中添加进度条;需要在table中嵌入element。table中有一个单元格是展示人员血量的值,这里向用可以变颜色的进度条来展示使其更加形象一些。
效果图
上代码:
需要注意的几个地方以下代码中都已经标记了“***重点***”。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="../static/lib/layui/css/layui.css" media="all"> <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 --> <style> .memberstatus-span-left { font-size: 25px; } .memberstatus-span-right { font-size: 25px; } </style> </head> <body> <table class="layui-hide" id="test" lay-filter="test"></table> <script src="../static/lib/layui/layui.js" charset="utf-8"></script> <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 --> <script> //***重点***:需要把使用到的layui组件table和element都引用进来 layui.use([ 'table','element'], function(){ var table = layui.table; var element = layui.element; table.render({ elem: '#test' ,url:'memberStatus?search=1' ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增 //,data: [] //也可以不用url改为使用data直接传数据 // ,autoSort: false //取消自动排序 ,cols: [ [ // {field:'id', title: 'ID', align: 'center',sort: true} ,{field:'memberName', title: '人员名称', align: 'center',sort: true} //***重点***:将队伍装换为layui图表,根据队伍值设置图标颜色 ,{field:'team', title: '队伍', align: 'center', sort: true,templet: function(d){ if(parseInt(d.team) =='1'){ return '<i class="layui-icon layui-icon-group" style="font-size: 30px; color: #FF5722;"></i> ' }else if(parseInt(d.team)=='2') { return '<i class="layui-icon layui-icon-group" style="font-size: 30px; color: #01AAED;"></i> ' }else{ return d.team } }} //单元格内容水平居中 ,{field:'deviceCode', title: '装备编号', align: 'center',sort: true} // ***重点***:通过血量的值拼接element组件中的进度条,进度条的样式可以去layui官网找 ,{field:'hp', title: '血量', align: 'center',sort: true,templet: function(d){ //***重点***:判断颜色 var ys = ''; if(30<d.hp && d.hp<100){ ys='layui-bg-orange' }else if(0<d.hp && d.hp<=30){ ys='layui-bg-red' } //***重点***:拼接进度条 return '<div class="layui-progress layui-progress-big" lay-showpercent="true"><div class="layui-progress-bar '+ys+'" lay-percent="'+d.hp+'%"></div></div><br>' }} ,{field:'hitedNumber', title: '中弹数', align: 'center',sort: true} ,{field:'hitNumber', title: '击中数', align: 'center',sort: true} ,{field:'rePlenishBullet', title: '补弹次数', align: 'center',sort: true} ,{field:'reviveNum', title: '复活次数', align: 'center',sort: true} ] ] //***重点***:***重点***:***重点***:如果没有这一步,进度条是不会生效的。应为table渲染之后没有渲染element ,done:function (res,currentCount) { //***重点***:table渲染完成后渲染element进度条 element.render() } }); }); </script> </body> </html>