react-tree-matrix

大纲视图展示

Demo

const data = [
  {
    title: '规划',
    type: 'program',
    children: [
      {
        title: '规划',
        type: 'program',
        children: [
          {
            title: '工作',
            type: 'work',
            children: [
              {
                title: '工作',
                type: 'work',
                children: [
                  {
                    title: '任务',
                    type: 'task',
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        title: '规划',
        type: 'program',
        children: [
          {
            title: '工作',
            type: 'work',
            children: [
              {
                title: '工作',
                type: 'work',
                children: [
                  {
                    title: '工作',
                    type: 'work',
                    children: [
                      {
                        title: '任务',
                        type: 'task',
                      },
                    ],
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
  {
    title: '规划',
    type: 'program',
    children: [
      {
        title: '工作',
        type: 'work',
        children: [
          {
            title: '任务',
            type: 'task',
          },
        ],
      },
      {
        title: '工作',
        type: 'work',
        children: [
          {
            title: '任务',
            type: 'task',
          },
        ],
      },
    ],
  },
  {
    title: '规划',
    type: 'program',
    children: [
      {
        title: '工作',
        type: 'work',
        children: [
          {
            title: '任务',
            type: 'task',
          },
        ],
      },
    ],
  },
  {
    title: '规划',
    type: 'program',
    children: [
      {
        title: '规划',
        type: 'program',
        children: [
          {
            title: '工作',
            type: 'work',
            children: [
              {
                title: '任务',
                type: 'task',
              },
              {
                title: '任务',
                type: 'task',
              },
            ],
          },
        ],
      },
    ],
  },
];

API

Props

| 参数 | 说明 | 类型 | 默认值 | | ---------- | ------------ | -------- | ------ | | data | 数据源 | array | [] | | types | 类型数组 | array | [] | | cellWidth | 每个类型列宽 | array | [] | | cellHeight | 列高 | array | [] | | render | 重写每个格子 | function | -- |

更多属性参考 uxcore-matrix