layui 多表头列一对一显示问题

layui 多表的一对一显示列对不齐（colspan>1不存在这个问题）

主要解决方式是判断出colspan =1 也就是一对一的情况下才用这样的方式，这里只解决二级表头（三级表头可以看二级表头自己推写）

 1 [[//一级表头
 2 { rowspan: 2, title: '联系人', field: 'classify'},
 3 {title: '地址1',colspan:'1',field: 'classify'},
 4 {title: '地址1',colspan:'1',field: 'city'},
 5 {title: '地址1',colspan:'1',field: 'sign'},
 6 { rowspan: 2, title: '操作', field: 'score'}
 7 ],二级表头
 8 [
 9 {title: '省', field: 'classify',colGroup: 1},
10 { title: '市', field: 'city',colGroup: 1},
11 { title: '区', field: 'sign',colGroup: 1}
12 ]]

View Code

主要区别是一对一的情况下：一级表头加属性field: 'classify'（绑定数据列），二级表头加属性colGroup: 1（隐藏数据列）。这两个属性自己可以试下去掉和加上的区别

下面这段代码可以直接粘贴到测试网页里运行看效果

 1 
 2 
 3 
 4   "utf-8">
 5   
 6   "renderer" content="webkit">
 7   "X-UA-Compatible" content="IE=edge,chrome=1">
 8   "viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 9   "stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
10   
11 
12 
13  
14 class="layui-hide" id="demo" lay-filter="test">
15  
16 
20 
"color: #999">注：上述例子读取的均是静态模拟数据
21                
22           
23 
24 
25 
78 
79 
80 

View Code

https://www.layui.com/demo/ 

上面这个网址是layui官网demo在线测试地址，可以把如上代码直接复制粘贴看效果