Layui表格之多列合并展示

前言:

当我们在使用Layui的时候,有时表格中的列比较多,展示出来肯定是有问题的,这样就不得不舍弃一些列不展示,不展示是一种解决方案,但是更好的解决方案应该是合并展示。

这里的展示不是合并单元格,合并单元格方法请参考:https://www.cnblogs.com/Kingram/p/9781682.html

实现效果:

实现代码参考:

{
  title : '业务信息',
  width : '15%',
  templet : function(d) {
    return '业务名称:'+d.businessName+'
业务编号:'+d.businessNumber + '
业务类型:'+d.typeName+'';   } }
{
  title : '创建/派发/竣工时间',
  width : '15%',
  templet :
function(d) {     return '创建时间:'+d.createTime+'
派发时间:'+d.sendTime+'
竣工时间:'+d.finishTime+'';   } }

注意:

另外需要加上CSS代码改变表格行高,否则还是不显示,代码如下:

.layui-table-cell{
  height: 100%;
  max-width: 100%;
  line-height:1.2;
 }

 

你可能感兴趣的:(Layui表格之多列合并展示)