LayUI Table复杂表头实现

Posted 2020-11-24 hilsion

LayUI table官方文档中在介绍复杂表头时的用例仅使用了自动渲染的方式作为参考，而并未用到方法渲染的方式来做用例，这让部分不太熟悉layUI table的开发者会有些头疼，不知道如何在方法渲染中实现复杂表头，本文将对此做一个简单的介绍。
在方法渲染中，我们通过在配置clos时对需要使用复杂表头的列添加相应的配置项owspan,colspan。

配置代码如下：

cols: [
    ／／一级表头
    [
        { rowspan: 2, title: '联系人', field: 'person'},
        { rowspan: 2, title: '地址', colspan: 3},
        { rowspan: 2, title: '操作', field: 'option'}
    ],
    ／／二级表头
    [
        { title: '省', field: 'provence'},
        { title: '市', field: 'city'},
        { title: '区', field: 'area'}
    ]
],

如上代码所示，在LayUI中使用方法渲染复杂表头时，将各级表头分别放在一个数组中，且按照放置的顺序来判断其级别（一级第一个，二级第二个等等），一般来说，有几级深度的表头，那么在第一级中无子级的就需要有相应的rowspan，有子级的，就要有相应的colspan。