場景：列表中添加進度條；需要在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>