3分钟搞定表格数据可视化！Layui条件格式化让数据一目了然
【免费下载链接】layui 
项目地址: https://gitcode.com/gh_mirrors/lay/layui
你是否还在为表格数据密密麻麻难以阅读而烦恼？是否希望通过颜色、图标直观区分数据状态？本文将带你掌握Layui表格组件（Table Component）的条件格式化技巧，3分钟让你的数据表格从此"会说话"！
为什么需要条件格式化？
在后台管理系统中，我们经常需要处理大量数据。例如：
- 订单金额超过10000元标红显示
- 库存不足10件时显示警告图标
- 任务状态用不同颜色区分（进行中/已完成/已逾期）
没有格式化的表格就像一本没有插图的说明书，而Layui的条件格式化功能正是解决这个痛点的利器。官方文档中详细介绍了表格组件的完整功能，其中templet属性是实现条件格式化的核心。
核心实现方法：templet模板函数
Layui表格通过templet属性支持自定义单元格内容，其函数形式可以接收当前行数据d作为参数，根据条件动态生成HTML。
基础语法结构
table.render({
elem: '#demo',
cols: [[
{field: 'score', title: '成绩', templet: function(d){
// 根据分数返回不同样式
if(d.score >= 90){
return '<span style="color: #009688;">优秀</span>';
} else if(d.score >= 60){
return '<span style="color: #1E9FFF;">及格</span>';
} else {
return '<span style="color: #FF5722;">不及格</span>';
}
}}
]],
url: '/demo/table/user/' // 实际使用时替换为你的数据接口
});
五种实用场景案例
1. 数值区间着色
对销售额、评分等数值型数据按区间显示不同颜色：
{field: 'amount', title: '销售额', templet: function(d){
var color = '#666';
if(d.amount > 10000) color = '#FF5722';
else if(d.amount > 5000) color = '#FFB800';
return `<span style="color: ${color}; font-weight: bold;">${d.amount}元</span>`;
}}
2. 状态标签显示
将状态值（0/1/2）转换为直观标签：
{field: 'status', title: '订单状态', templet: function(d){
var statusMap = {
0: {text: '待付款', class: 'layui-btn-primary'},
1: {text: '已付款', class: 'layui-btn-normal'},
2: {text: '已发货', class: 'layui-btn-warm'},
3: {text: '已完成', class: 'layui-btn-success'}
};
var status = statusMap[d.status] || statusMap[0];
return `<button class="layui-btn ${status.class} layui-btn-xs">${status.text}</button>`;
}}
3. 图标辅助显示
结合Layui图标增强视觉效果：
{field: 'stock', title: '库存状态', templet: function(d){
if(d.stock <= 0){
return '<i class="layui-icon layui-icon-close" style="color: #FF5722;"></i> 缺货';
} else if(d.stock <= 10){
return '<i class="layui-icon layui-icon-warning" style="color: #FFB800;"></i> 库存紧张';
} else {
return '<i class="layui-icon layui-icon-ok" style="color: #009688;"></i> 库存充足';
}
}}
4. 进度条可视化
将完成度等数据用进度条展示：
{field: 'progress', title: '完成进度', templet: function(d){
var percent = d.progress + '%';
var color = '#5FB878';
if(d.progress < 30) color = '#FF5722';
else if(d.progress < 70) color = '#FFB800';
return `<div class="layui-progress" lay-showpercent="true" style="margin: 10px 0;">
<div class="layui-progress-bar" lay-percent="${percent}" style="background-color: ${color};"></div>
</div>`;
}}
5. 复杂条件组合
多字段联合判断实现更复杂的业务逻辑：
{field: 'level', title: '客户等级', templet: function(d){
// 结合消费金额和会员等级判断
if(d.vip && d.amount > 50000){
return '<span style="background: #FF5722; color: white; padding: 2px 5px; border-radius: 3px;">VIP客户</span>';
} else if(d.amount > 10000 || d.integral > 5000){
return '<span style="background: #FFB800; color: white; padding: 2px 5px; border-radius: 3px;">高级客户</span>';
} else {
return '<span>普通客户</span>';
}
}}
完整示例代码
以下是一个包含多种格式化效果的完整表格示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui表格条件格式化示例</title>
<!-- 国内CDN -->
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.9.10/css/layui.css">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="https://cdn.staticfile.org/layui/2.9.10/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
// 渲染表格
table.render({
elem: '#demo',
height: 420,
url: 'examples/json/table/demo1.json', // 本地数据文件
page: true,
cols: [[
{field: 'id', title: 'ID', width:80, sort: true},
{field: 'username', title: '用户名', width:120},
{field: 'score', title: '成绩', templet: function(d){
if(d.score >= 90) return '<span style="color: #009688;">优秀</span>';
else if(d.score >= 60) return '<span style="color: #1E9FFF;">及格</span>';
else return '<span style="color: #FF5722;">不及格</span>';
}},
{field: 'status', title: '状态', templet: function(d){
var statusMap = {0:'待付款', 1:'已付款', 2:'已发货', 3:'已完成'};
var colorMap = {0:'#C9C9C9', 1:'#1E9FFF', 2:'#FFB800', 3:'#009688'};
return `<span style="color: ${colorMap[d.status]}; font-weight: bold;">${statusMap[d.status]}</span>`;
}},
{field: 'progress', title: '进度', templet: function(d){
return `<div class="layui-progress" lay-showpercent="true">
<div class="layui-progress-bar" lay-percent="${d.progress}%"
style="background-color: ${d.progress>70?'#5FB878':d.progress>30?'#FFB800':'#FF5722'}"></div>
</div>`;
}}
]]
});
});
</script>
</body>
</html>
高级技巧与性能优化
1. 模板复用
将复杂模板定义为脚本片段，提高代码可维护性：
<script type="text/html" id="tpl-status">
{{# if(d.status === 0){ }}
<span class="layui-badge">待处理</span>
{{# } else if(d.status === 1){ }}
<span class="layui-badge layui-bg-green">已处理</span>
{{# } else { }}
<span class="layui-badge layui-bg-red">已驳回</span>
{{# } }}
</script>
<script>
// 使用模板
table.render({
cols: [[
{field: 'status', title: '状态', templet: '#tpl-status'}
]]
});
</script>
2. 避免过度渲染
- 减少DOM操作：尽量通过CSS类控制样式而非内联样式
- 复杂计算缓存：将重复计算的结果缓存
- 事件委托：利用
table.on('tool(test)', callback)集中处理事件
3. 结合单元格编辑
配合表格的编辑功能实现即时格式化反馈：
{field: 'amount', title: '金额', edit: 'text', templet: function(d){
return `<span style="color: ${d.amount>10000?'#FF5722':'#666'}">${d.amount}</span>`;
}}
// 编辑事件监听
table.on('edit(test)', function(obj){
if(obj.field === 'amount'){
// 编辑后自动重新渲染
obj.update({
amount: obj.value
});
}
});
常见问题解决
Q: 为什么格式化后表格排序功能异常？
A: 条件格式化仅改变显示内容，不会影响原始数据。如需按格式化后的值排序，需在sort事件中处理：
table.on('sort(test)', function(obj){
table.reload('demo', {
initSort: obj,
where: {
field: obj.field,
order: obj.type
}
});
});
Q: 如何在分页或搜索后保持格式化状态？
A: 由于templet是渲染时执行，分页和搜索后会自动重新应用格式化，无需额外处理。
Q: 大量数据下格式化会影响性能吗？
A: Layui表格本身做了性能优化，但复杂的DOM操作仍可能影响性能。建议：
- 减少复杂计算
- 避免在模板函数中操作DOM
- 大数据量时考虑后端分页
总结与扩展
通过本文介绍的templet函数方法，我们可以轻松实现表格数据的条件格式化。这个功能虽然简单，但能极大提升数据的可读性和用户体验。Layui表格组件还提供了丰富的API，如单元格编辑、行事件监听等，可以进一步扩展表格的交互能力。
下一期我们将介绍如何实现表格数据的导出功能，敬请关注！如果你觉得本文有用，欢迎点赞收藏，也欢迎在评论区分享你的使用经验。
【免费下载链接】layui 项目地址: https://gitcode.com/gh_mirrors/lay/layui
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
