如何让layui的表格中可以显示彩色高亮字

在 layui 表格中实现显示彩色高亮字，可以通过 `cols` 中的 `templet` 来实现。以下是一个示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>layui 表格彩色高亮字</title>  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.min.css"> </head> <body>  <table id="demo" lay-filter="test"></table>  <script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js"></script> <script> layui.use('table', function () { var table = layui.table; // 渲染表格 table.render({ elem: '#demo', url: 'data.json', // 数据接口 cols: [[ { field: 'id', title: 'ID' }, { field: 'name', title: '姓名' }, { field: 'score', title: '分数', templet: function (d) { // 根据分数的不同显示不同颜色 if (d.score >= 90) { return '<span style="color: green;">' + d.score + '</span>'; } else if (d.score >= 60) { return '<span style="color: blue;">' + d.score + '</span>'; } else { return '<span style="color: red;">' + d.score + '</span>'; } } } ]], page: true }); }); </script> </body> </html> ``` 代码解释 1. 引入 layui 的 CSS 和 JS 文件。 2. 创建一个表格容器，使用 `id` 和 `lay-filter` 进行标识。 3. 使用 `layui.use` 加载 `table` 模块。 4. 在 `table.render` 中配置表格的各项参数，包括数据源、列定义等。 5. 在 `cols` 中，为需要显示彩色高亮字的列设置 `templet` 函数，根据条件返回不同颜色的 HTML 代码。需要小心的地方我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 确保引入的 layui 版本兼容，不同版本的 API 可能会有差异。 2. 在 `templet` 函数中，使用内联样式时要注意代码的可维护性，可以考虑将样式提取到 CSS 文件中。 3. 当数据量较大时，频繁操作 DOM 可能会影响性能，可考虑使用事件委托等方式优化。 [2026-01-06 17:05:26 | AI写代码神器 | 660点数解答]

服务商

更多选项

快捷项

直通车

如何让layui的表格中可以显示彩色高亮字