最终效果:
js代码:
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#companyBoxB',
url: ‘’ ,//数据接口
height: 285,
method:'post',
where:{year,quarter,month,distCode},
page: false,//开启分页,
cols: [[ //表头
{field: 'id', title: '排名',align:'center',width: '20%',templet: iconHtmlFn},
{field: 'entName', title: '区域', width: '40%',align:'center'},
{field: 'targetRatio', title: '平均目标达成率', width: '40%',align:'center'}
]],
parseData: function(res){
return {
"code": res.code, //解析接口状态
"data": res.data.rows //解析数据列表
};
}
});
function iconHtmlFn(d) {
//判断 d.LAY_INDEX 前三名展示图片,其他展示数字
if(d.LAY_INDEX === 1){
return `<span style="display: block;width:20px;height: 20px;background: url(${'/hg/page/hg-fiveinOneSubject/public/img/responsibilityManagement/one.png'}) no-repeat center center;background-size: 100% 100%;" class="layui-blue"></span>`
} else if(d.LAY_INDEX === 2){
return `<span style="display: block;width:20px;height: 20px;background: url(${'/hg/page/hg-fiveinOneSubject/public/img/responsibilityManagement/two.png'}) no-repeat center center;background-size: 100% 100%;" class="layui-blue"></span>`
} else if(d.LAY_INDEX === 3){
return `<span style="display: block;width:20px;height: 20px;background: url(${'/hg/page/hg-fiveinOneSubject/public/img/responsibilityManagement/three.png'}) no-repeat center center;background-size: 100% 100%;" class="layui-blue"></span>`
} else{
return d.LAY_INDEX
}
}
});