LayUI Table复杂表头实现

Posted hilsion

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了LayUI Table复杂表头实现相关的知识,希望对你有一定的参考价值。

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。

以上是关于LayUI Table复杂表头实现的主要内容,如果未能解决你的问题,请参考以下文章

layui table 表格动态表头

layui 数据table隐藏表头

layui table 表格出现表头和内容不对齐问题解决方法

layui table中固定表头,弹框缩放之后,表头对不齐问题

LayUI-Table表格渲染

layui数据表格-复杂的表头