3分钟解决！Layui表格单元格背景填充的3种实战方案

3分钟解决！Layui表格单元格背景填充的3种实战方案

【免费下载链接】layui 项目地址: https://gitcode.com/gh_mirrors/lay/layui

在使用Layui表格（Table组件）开发数据展示页面时，你是否遇到过这样的需求：根据单元格数值自动标记不同背景色（如销量达标显示绿色，未达标显示红色）？本文将通过3种实用方案，帮你零代码或极简代码实现这一功能，让数据可视化更直观。

方案一：使用templet函数动态生成样式（推荐）

Layui表格的templet属性支持函数形式，可直接在渲染时根据数据动态生成包含样式的HTML。这是最灵活且常用的实现方式。

实现步骤

1. 在表头定义中为目标列设置templet函数
2. 在函数内根据数据值判断并返回带背景色样式的单元格内容

代码示例

<table id="demo"></table>

<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#demo',
    url: '/static/json/table/demo1.json', // 实际项目中替换为你的数据接口
    cols: [[
      {field: 'id', title: 'ID', width:80},
      {field: 'name', title: '名称', width:120},
      {field: 'score', title: '成绩', width:100, 
        templet: function(d){
          // 根据分数判断背景色
          var color = '';
          if(d.score >= 90) color = '#5FB878'; // 绿色：优秀
          else if(d.score >= 60) color = '#F7BA1E'; // 黄色：及格
          else color = '#FF5722'; // 红色：不及格
          
          return '<div style="background-color: '+ color +'; color: white; padding: 5px; text-align: center;">'+ d.score +'</div>';
        }
      },
      {field: 'status', title: '状态', width:100}
    ]]
  });
});
</script>

核心原理

通过templet函数的d参数获取当前行数据，根据业务逻辑动态生成包含内联样式的HTML字符串。这种方式支持复杂的条件判断和样式定制。

官方文档：docs/table/index.md

方案二：利用单元格编辑事件动态修改样式

如果需要在数据加载后或单元格编辑后动态更新背景色，可以监听表格的edit事件，在事件回调中修改单元格样式。

实现步骤

1. 开启表格单元格编辑功能
2. 监听edit事件，在值变化时修改单元格样式

代码示例

<table id="demo" lay-filter="test"></table>

<script>
layui.use(['table', 'layer'], function(){
  var table = layui.table;
  var layer = layui.layer;
  
  table.render({
    elem: '#demo',
    url: '/static/json/table/demo1.json',
    cellMinWidth: 80,
    cols: [[
      {field: 'id', title: 'ID', width:80},
      {field: 'name', title: '名称', width:120},
      {field: 'stock', title: '库存', width:100, edit: 'text'}, // 开启编辑
      {field: 'sales', title: '销量', width:100}
    ]]
  });
  
  // 监听单元格编辑事件
  table.on('edit(test)', function(obj){
    var value = obj.value; // 得到修改后的值
    var tr = obj.tr; // 得到当前行元素对象
    var field = obj.field; // 得到修改的字段名
    
    // 仅处理库存字段
    if(field === 'stock'){
      // 根据库存值设置背景色
      if(value <= 10){
        tr.find('td[data-field="stock"]').css('background-color', '#FFEBEB');
        layer.tips('库存不足！', tr.find('td[data-field="stock"]'), {tips: 1});
      } else if(value <= 50){
        tr.find('td[data-field="stock"]').css('background-color', '#FFF8E6');
      } else {
        tr.find('td[data-field="stock"]').css('background-color', ''); // 清除样式
      }
    }
  });
});
</script>

适用场景

• 需要在数据编辑后实时反馈状态
• 需结合用户交互动态更新样式
• 复杂的样式计算逻辑

事件文档：docs/table/index.md

方案三：通过CSS类名批量控制样式

对于有固定状态分类的场景，可以预定义CSS类，通过templet为不同状态的单元格添加对应的类名，实现样式的批量控制。

实现步骤

1. 定义状态对应的CSS类
2. 在templet中根据数据为单元格添加类名

代码示例

<style>
/* 预定义样式类 */
.layui-table-cell.high { background-color: #E8F5E9; }
.layui-table-cell.medium { background-color: #FFF8E1; }
.layui-table-cell.low { background-color: #FFEBEE; }
</style>

<table id="demo"></table>

<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#demo',
    url: '/static/json/table/demo1.json',
    cols: [[
      {field: 'id', title: 'ID', width:80},
      {field: 'name', title: '产品', width:120},
      {field: 'progress', title: '完成度', width:150, 
        templet: function(d){
          // 根据完成度返回不同类名
          var className = 'high';
          if(d.progress < 30) className = 'low';
          else if(d.progress < 70) className = 'medium';
          
          return '<div class="layui-progress layui-progress-big" lay-showpercent="yes">' +
                  '<div class="layui-progress-bar" lay-percent="'+ d.progress +'%"></div>' +
                '</div>';
        }
      },
      {field: 'priority', title: '优先级', width:100,
        templet: function(d){
          var className = '';
          switch(d.priority){
            case '高': className = 'high'; break;
            case '中': className = 'medium'; break;
            case '低': className = 'low'; break;
          }
          return '<div class="'+ className +'">'+ d.priority +'</div>';
        }
      }
    ]]
  });
});
</script>

优势特点

• 样式与逻辑分离，便于维护
• 支持批量修改和主题切换
• 性能优于内联样式，适合大量数据

模板示例：docs/table/examples/templet.md

常见问题与解决方案

问题场景	解决方案	难度
固定列背景色不生效	使用!important提升样式优先级	★☆☆
分页后样式丢失	在done回调中重新应用样式	★★☆
大数据表格卡顿	采用CSS类名方案+虚拟滚动	★★★
导出表格样式丢失	导出前将样式写入Excel单元格	★★★

性能优化建议

1. 避免大量使用内联样式，优先采用CSS类名
2. 复杂计算放在done回调中一次性处理
3. 利用事件委托代替遍历绑定事件
4. 大数据表格考虑使用虚拟滚动

总结

本文介绍的三种方案各有适用场景：

• templet函数方案：灵活强大，适合初始化时渲染
• 事件修改方案：交互友好，适合编辑后动态更新
• CSS类名方案：性能优异，适合批量样式控制

根据实际业务需求选择合适的实现方式，也可以组合使用多种方案。Layui表格组件提供了丰富的API，开发者可以通过官方文档探索更多高级用法。

希望本文能帮助你解决表格单元格背景填充的问题，让数据展示更加直观和专业！

【免费下载链接】layui 项目地址: https://gitcode.com/gh_mirrors/lay/layui