infinite-split-table
通過配置無限分割表格,可快速實現任意複雜佈局的報表
配置說明
- 每一行,每一列都可以當做一個節點
- 每個節點裏可嵌套節點
- 每個節點必須由id,type,data三個字段組成
- type可選類型:
- row:行
- column:列
- label:標籤
- 其他(自行擴展)
- 其他配置
- width:節點寬(像素或百分比,父節點type爲row時生效)
- height:節點高(像素或百分比,父節點爲column時生效)
- 其他(自行擴展)
- 示例節點
{ id:13, type:'label', data:'8', width:'150px' }
示例配置
tree_data:{
type:'column',
id:0,
data:[
{
id:1,
type:'row',
data:[
{
id:2,
type:'label',
data:'1',
width:'20%'
},
{
id:3,
type:'label',
data:'2'
},
{
id:4,
type:'column',
width:'20%',
data:[
{
id:5,
type:'row',
data:[
{
id:7,
type:'label',
data:'3'
},
{
id:8,
type:'label',
data:'4'
},
]
},
{
id:6,
type:'row',
data:[
{
id:9,
type:'label',
data:'5'
},
{
id:10,
type:'label',
data:'6'
},
]
},
]
}
],
},
{
id:11,
type:'label',
data:'7'
},
{
id:12,
type:'row',
data:[
{
id:13,
type:'label',
data:'8',
width:'150px'
},
{
id:14,
type:'label',
data:'9'
},
{
id:15,
type:'label',
data:'10',
width:'150px'
},
{
id:16,
type:'label',
data:'11'
},
]
}
]
}
效果展示
-
示例代碼配置效果
-
複雜配置效果(配置代碼省略)