欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue通过配置无限分割表格,可快速实现任意复杂布局的报表

程序员文章站 2024-03-09 16:08:31
...

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'
        },
      ]
    }
  ]
}

效果展示

  • 示例代码配置效果
    Vue通过配置无限分割表格,可快速实现任意复杂布局的报表

  • 复杂配置效果(配置代码省略)
    Vue通过配置无限分割表格,可快速实现任意复杂布局的报表