LayUI Table複雜表頭實現

LayUI table官方文檔中在介紹複雜表頭時的用例僅使用了自動渲染的方式做爲參考,而並未用到方法渲染的方式來作用例,這讓部分不太熟悉layUI table的開發者會有些頭疼,不知道如何在方法渲染中實現複雜表頭,本文將對此作一個簡單的介紹。
在方法渲染中,咱們經過在配置clos時對須要使用複雜表頭的列添加相應的配置項owspan,colspanjavascript

配置代碼以下:java

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自動發佈git

相關文章
相關標籤/搜索