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。

本篇文章由一文多发平台ArtiPub自动发布

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 说明:官方文档写的特别好!但是我吧,光看是记不到啥东西的,所以就挑着自己写了点,emmmm,基本都是copy官网,...
    啊_6424阅读 5,840评论 0 0
  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 14,744评论 0 38
  • 一. Java基础部分.................................................
    wy_sure阅读 9,258评论 0 11
  • 快速使用 创建一个table实例最简单的方式是,在页面放置一个元素 ,然后通过 table.render() ...
    勿念及时雨阅读 5,099评论 0 1
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,806评论 1 32