Vue配置生成無限分割的表格，可快速實現任意複雜報表

時間 2019-12-20

標籤 vue 配置生成無限分割表格快速實現任意複雜報表简体版

原文原文鏈接

GitHub項目：infinite-split-tablegit

經過代碼配置無限分割表格，可快速實現任意佈局

配置說明github

每一行，每一列均可以當作一個節點
每一個節點裏可嵌套節點
每一個節點必須由id,type,data三個字段組成
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'
        },
      ]
    }
  ]
}

效果展現spa