vue合并横向树表格？

Question

合并横向树表格
最近接到一个功能是关于勾选菜单权限的。以前的做法就是直接扔个tree + checkbox就解决了。直到在站酷上看到一个设计就是将tree的呈现方式换成表格。本以为很简单，但前前后后尝试了3次并没有完成。。。

效果图：
但也只是把效果写出来了，在实现checkbox多选卡住了。
下面贴上数据代码

[
    {
      id: 2,
      parentId: 1,
      title: '分析页',
      menuType: 'C',
      perms: null,
      name: 'DashboardAnalysis',
      icon: null,
      component: 'dashboard\/analysis',
      redirect: null,
      path: '\/dashboard\/analysis',
      url: null,
      keepAlive: 1,
      target: null,
      orderNum: 0,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-10-30 15:34:32',
      updateTime: '2023-12-12 17:20:50',
    },
    {
      id: 7,
      parentId: 6,
      title: '操作日志',
      menuType: 'C',
      perms: null,
      name: 'SystemLogOperlog',
      icon: null,
      component: 'system\/log\/operlog',
      redirect: null,
      path: '\/system\/log\/operlog',
      url: null,
      keepAlive: 0,
      target: null,
      orderNum: 0,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-10-30 15:56:52',
      updateTime: '2023-12-12 17:21:57',
    },
    {
      id: 8,
      parentId: 6,
      title: '登陆日志',
      menuType: 'C',
      perms: null,
      name: 'SystemLogLogininfor',
      icon: null,
      component: 'system\/log\/logininfor',
      redirect: null,
      path: '\/system\/log\/logininfor',
      url: null,
      keepAlive: 0,
      target: null,
      orderNum: 0,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-10-30 15:56:55',
      updateTime: '2023-12-12 17:22:01',
    },
    {
      id: 1,
      parentId: 0,
      title: '仪表盘',
      menuType: 'M',
      perms: null,
      name: 'Dashboard',
      icon: 'DashboardOutlined',
      component: 'RouteView',
      redirect: '\/dashboard\/analysis',
      path: '\/dashboard',
      url: null,
      keepAlive: 0,
      target: null,
      orderNum: 1,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-10-30 15:00:51',
      updateTime: '2023-12-12 17:14:53',
    },
    {
      id: 10,
      parentId: 3,
      title: '机构管理',
      menuType: 'C',
      perms: null,
      name: 'Organization',
      icon: null,
      component: 'system\/organization',
      redirect: null,
      path: '\/system\/organization',
      url: null,
      keepAlive: 0,
      target: '_blank',
      orderNum: 1,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-11-06 18:39:36',
      updateTime: '2023-12-12 17:21:27',
    },
    {
      id: 15,
      parentId: 13,
      title: '新增',
      menuType: 'F',
      perms: 'company:member:add',
      name: '',
      icon: null,
      component: null,
      redirect: null,
      path: null,
      url: null,
      keepAlive: 0,
      target: '_blank',
      orderNum: 1,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-12-12 15:31:48',
      updateTime: null,
    },
    {
      id: 19,
      parentId: 18,
      title: '新增机构团队',
      menuType: 'F',
      perms: 'company:org:add',
      name: null,
      icon: null,
      component: null,
      redirect: null,
      path: null,
      url: null,
      keepAlive: 0,
      target: '_blank',
      orderNum: 1,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-12-18 10:27:40',
      updateTime: '2023-12-18 10:29:19',
    },
    {
      id: 24,
      parentId: 4,
      title: '权限角色',
      menuType: 'C',
      perms: null,
      name: 'SystemARole',
      icon: null,
      component: 'system\/role',
      redirect: null,
      path: '\/system\/roles\/role',
      url: null,
      keepAlive: 1,
      target: null,
      orderNum: 1,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-12-30 22:23:19',
      updateTime: '2023-12-30 22:42:38',
    },
    {
      id: 25,
      parentId: 24,
      title: '新增角色',
      menuType: 'F',
      perms: 'role:list:add',
      name: null,
      icon: null,
      component: null,
      redirect: null,
      path: null,
      url: null,
      keepAlive: 0,
      target: '_blank',
      orderNum: 1,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-12-30 22:48:29',
      updateTime: null,
    },
    {
      id: 28,
      parentId: 23,
      title: '保存角色',
      menuType: 'F',
      perms: 'role:list:save',
      name: null,
      icon: null,
      component: null,
      redirect: null,
      path: null,
      url: null,
      keepAlive: 0,
      target: '_blank',
      orderNum: 1,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-12-30 22:51:37',
      updateTime: null,
    },
    {
      id: 4,
      parentId: 3,
      title: '角色管理',
      menuType: 'M',
      perms: null,
      name: 'SystemRoles',
      icon: null,
      component: 'RouteView',
      redirect: null,
      path: '\/system\/roles',
      url: null,
      keepAlive: 0,
      target: null,
      orderNum: 2,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-10-30 15:56:44',
      updateTime: '2023-12-30 22:22:19',
    },
    {
      id: 16,
      parentId: 13,
      title: '编辑',
      menuType: 'F',
      perms: 'company:member:edit',
      name: null,
      icon: null,
      component: null,
      redirect: null,
      path: null,
      url: null,
      keepAlive: 0,
      target: '_blank',
      orderNum: 2,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-12-13 12:54:28',
      updateTime: '2023-12-13 12:55:18',
    },
    {
      id: 18,
      parentId: 12,
      title: '组织架构',
      menuType: 'C',
      perms: null,
      name: 'organization',
      icon: null,
      component: 'company\/organization',
      redirect: null,
      path: '\/company\/organization',
      url: null,
      keepAlive: 1,
      target: '_blank',
      orderNum: 2,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-12-14 10:23:34',
      updateTime: null,
    },
    {
      id: 21,
      parentId: 18,
      title: '编辑机构团队',
      menuType: 'F',
      perms: 'company:org:edit',
      name: null,
      icon: null,
      component: null,
      redirect: null,
      path: null,
      url: null,
      keepAlive: 0,
      target: '_blank',
      orderNum: 2,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-12-18 10:29:35',
      updateTime: null,
    },
    {
      id: 23,
      parentId: 4,
      title: '编辑角色',
      menuType: 'C',
      perms: null,
      name: 'SystemARoleForm',
      icon: null,
      component: 'system\/role\/roleForm',
      redirect: null,
      path: '\/system\/roles\/role\/:type\/:id?',
      url: null,
      keepAlive: 0,
      target: '_blank',
      orderNum: 2,
      isFrame: 0,
      hideInMenu: 1,
      hideInBreadcrumb: 1,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: [
        '\/system\/roles\/role',
      ],
      createTime: '2023-12-28 14:46:25',
      updateTime: '2023-12-30 22:25:08',
    },
    {
      id: 26,
      parentId: 24,
      title: '编辑角色',
      menuType: 'F',
      perms: 'role:list:edit',
      name: null,
      icon: null,
      component: null,
      redirect: null,
      path: null,
      url: null,
      keepAlive: 0,
      target: '_blank',
      orderNum: 2,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-12-30 22:49:36',
      updateTime: null,
    },
    {
      id: 9,
      parentId: 3,
      title: '账户管理',
      menuType: 'C',
      perms: null,
      name: 'RoleMember',
      icon: null,
      component: 'system\/role-member',
      redirect: null,
      path: '\/system\/role-member',
      url: null,
      keepAlive: 1,
      target: '_blank',
      orderNum: 3,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-11-06 18:14:38',
      updateTime: '2023-12-12 17:21:35',
    },
    {
      id: 12,
      parentId: 0,
      title: '公司管理',
      menuType: 'M',
      perms: null,
      name: 'company',
      icon: 'HomeOutlined',
      component: 'RouteView',
      redirect: '\/company\/member',
      path: '\/company',
      url: null,
      keepAlive: 0,
      target: '_blank',
      orderNum: 3,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-11-17 13:59:06',
      updateTime: '2023-12-12 17:20:56',
    },
    {
      id: 13,
      parentId: 12,
      title: '业务员管理',
      menuType: 'C',
      perms: null,
      name: 'CompanyMember',
      icon: null,
      component: 'company\/member',
      redirect: null,
      path: '\/company\/member',
      url: null,
      keepAlive: 0,
      target: '_blank',
      orderNum: 3,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-11-17 14:00:42',
      updateTime: '2023-12-14 10:24:01',
    },
    {
      id: 17,
      parentId: 13,
      title: '删除',
      menuType: 'F',
      perms: 'company:member:del',
      name: null,
      icon: null,
      component: null,
      redirect: null,
      path: null,
      url: null,
      keepAlive: 0,
      target: '_blank',
      orderNum: 3,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-12-13 12:55:05',
      updateTime: '2023-12-13 12:55:25',
    },
    {
      id: 22,
      parentId: 18,
      title: '删除机构团队',
      menuType: 'F',
      perms: 'company:org:del',
      name: null,
      icon: null,
      component: null,
      redirect: null,
      path: null,
      url: null,
      keepAlive: 0,
      target: '_blank',
      orderNum: 3,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-12-18 10:29:54',
      updateTime: null,
    },
    {
      id: 27,
      parentId: 24,
      title: '删除角色',
      menuType: 'F',
      perms: 'role:list:del',
      name: null,
      icon: null,
      component: null,
      redirect: null,
      path: null,
      url: null,
      keepAlive: 0,
      target: '_blank',
      orderNum: 3,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-12-30 22:50:38',
      updateTime: null,
    },
    {
      id: 5,
      parentId: 3,
      title: '菜单管理',
      menuType: 'C',
      perms: null,
      name: 'SystemMenu',
      icon: null,
      component: 'system\/menu',
      redirect: null,
      path: '\/system\/menu',
      url: null,
      keepAlive: 1,
      target: null,
      orderNum: 4,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-10-30 15:56:47',
      updateTime: '2023-12-12 17:21:41',
    },
    {
      id: 6,
      parentId: 3,
      title: '日志管理',
      menuType: 'M',
      perms: null,
      name: 'SystemLog',
      icon: null,
      component: 'RouteView',
      redirect: null,
      path: '\/system\/log',
      url: null,
      keepAlive: 0,
      target: null,
      orderNum: 99,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-10-30 15:56:50',
      updateTime: '2023-12-12 17:21:47',
    },
    {
      id: 3,
      parentId: 0,
      title: '系统设置',
      menuType: 'M',
      perms: null,
      name: 'System',
      icon: 'SettingOutlined',
      component: 'RouteView',
      redirect: '\/system\/role',
      path: '\/system',
      url: null,
      keepAlive: 0,
      target: null,
      orderNum: 999,
      isFrame: 0,
      hideInMenu: 0,
      hideInBreadcrumb: 0,
      hideChildrenInMenu: 0,
      status: 1,
      parentKeys: null,
      createTime: '2023-10-30 15:50:24',
      updateTime: '2023-12-12 17:21:19',
    },
  ]

menuType=> F为按钮 其他为目录和菜单
需求：将为F的按钮全部拿到，根据parentId找到对应的父级然后创建一个funBtns:[]放进去后。
再生成treeData

treeData长这样
[
{
  id: 12,
  parentId: 0,
  menuType: 'M',
  title: '公司管理',
  name: 'company',
  status: 1,
  perms: null,
  path: '/company',
  funcList: [],
  children: [
    {
    id: 18,
    parentId: 12,
    menuType: 'C',
    title: '组织架构',
    name: 'organization',
    status: 1,
    perms: null,
    path: '/company/organization',
    funcList: [{
      id: 19,
      parentId: 18,
      menuType: 'F',
      title: '新增机构团队',
      name: null,
      status: 1,
      perms: 'company:org:add',
      path: null,
    }, 
    {
      id: 21,
      parentId: 18,
      menuType: 'F',
      title: '编辑机构团队',
      name: null,
      status: 1,
      perms: 'company:org:edit',
      path: null,
    }]
  }]
}
]

再将这些数据通过html table 或者 antd-design-vue table + checkbox实现上面效果图 并能完成提交，提交都是所有选中的id。

求过路大神指点～～～ 给跪了～

不知道如何下手

补充：路由菜单设置为最多三级，