layui数据表格的在同一个单元格展示两个数据

layui表格的数示两单元格里塞两个数据，这需求听着简单，据表据真做起来能卡住不少人。格的格展个数默认的单元`templet`模板功能其实够用，但很多人只会用它改个颜色、数示两加个按钮，据表据压根没想过能玩出花来。格的格展个数我今天就给你拆解一个最实用的单元场景：商品列表里，同一个格子要显示“价格”和“库存”，数示两而且价格得带单位，据表据库存得带颜色标识。格的格展个数 先看最直接的单元写法。在`cols`配置里，数示两给那一列指定`templet`函数，据表据函数返回一段拼接好的格的格展个数HTML字符串。比如： ```javascript { field: 'price', title: '价格/库存', templet: function(d) { return '¥' + d.price + ' / ' + '' + (d.stock > 0 ? '有货(' + d.stock + ')' : '缺货') + ''; }} ``` 这段代码干了三件事：先取出当前行数据`d`，拼出价格部分，再判断库存量决定显示样式。注意那个`d`是layui自动传入的当前行对象，你直接拿字段名取值就行。这里有个坑——如果字段名带点号，比如`d.info.price`，那就得用`d.info.price`而不是`d['info.price']`，别搞混了。 但光会拼接还不够。实际项目里，两个数据往往来自不同接口或者需要二次格式化。比如价格是分单位存储的，后端返回的是`1299`，你得除以100再带两位小数。那`templet`里就得写逻辑： ```javascript function(d) { var price = (d.price / 100).toFixed(2); var stockClass = d.stock > 10 ? 'text-success' : (d.stock > 0 ? 'text-warning' : 'text-danger'); return '

' + ''; } ``` 这里我把两个数据拆成了两个`div`，这样样式控制更灵活。你甚至可以在CSS里给`.price-block`加粗体、给`.stock-block`加圆角背景，让它们看起来像两个独立的小标签。这比硬塞进一行文字里好看得多，尤其当表格宽度紧张时，上下排列反而省空间。 还有个进阶玩法——用`templet`配合`laytpl`模板引擎。layui自带`laytpl`，你可以把模板写在`script`标签里，然后动态渲染。适合那种结构复杂、逻辑多的场景，不然全塞在函数里，代码会又臭又长。 ```html ``` 然后在`cols`里写`templet: '#productTpl'`就行。注意`{ { = }}`是输出变量，`{ { # }}`里写JS逻辑，别把语法搞反了。这种写法的好处是模板和JS逻辑分离，改样式时不用翻代码文件，直接改HTML片段就行。 最后提醒个细节——单元格内容多了，表格行高会撑开，整体看着乱。最好在CSS里给这些单元格设置`white-space: normal`，允许换行，同时控制好内边距。不然默认的`nowrap`会强制一行显示，数据一长就挤成一坨。 这方法不挑版本，layui 2.x全系列通用。你拿去用，要是踩了`templet`不生效的坑，八成是列配置里忘了写`field`字段名，或者字段名和返回数据的key对不上。排查时先在`templet`里`console.log(d)`看一眼数据结构，比瞎猜快多了。