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。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM