element tree树形组件中使用props children数据多层嵌套问题

Question

后台的数据结构是这个样子

 [
        {
          departmentid: 1,
          depname: "预研部",
          deptype: "1",
          depcode: "0100",
          updepid: 0,
          depart: null,
          departments: [
            {
              departmentid: 15,
              depname: "设计组",
              deptype: "3",
              depcode: "0101",
              updepid: 1,
              depart: null,
              departments: null,
              jobs: [
                {
                  jobid: 5,
                  jobcode: null,
                  jobname: "平面设计",
                  upjobid: null,
                  depid: 15,
                  people: null,
                  department: null
                },
                {
                  jobid: 6,
                  jobcode: null,
                  jobname: "外观设计",
                  upjobid: null,
                  depid: 15,
                  people: null,
                  department: null
                },
                {
                  jobid: 7,
                  jobcode: null,
                  jobname: "宣传",
                  upjobid: null,
                  depid: 15,
                  people: null,
                  department: null
                },
                {
                  jobid: 12,
                  jobcode: null,
                  jobname: "平面设计助理",
                  upjobid: null,
                  depid: 15,
                  people: null,
                  department: null
                }
              ]
            }
          ],
          jobs: [
            {
              jobid: 2,
              jobcode: null,
              jobname: "软件工程师",
              upjobid: null,
              depid: 1,
              people: null,
              department: null
            },
            {
              jobid: 3,
              jobcode: null,
              jobname: "前端",
              upjobid: null,
              depid: 1,
              people: null,
              department: null
            }
          ]
        },
        {
          departmentid: 3,
          depname: "销售部",
          deptype: "2",
          depcode: "0300",
          updepid: 0,
          depart: null,
          departments: [
            {
              departmentid: 14,
              depname: "销售2",
              deptype: "2",
              depcode: "0301",
              updepid: 3,
              depart: null,
              departments: null,
              jobs: [
                {
                  jobid: 8,
                  jobcode: null,
                  jobname: "销售经理",
                  upjobid: null,
                  depid: 14,
                  people: null,
                  department: null
                }
              ]
            }
          ],
          jobs: [
            {
              jobid: 9,
              jobcode: null,
              jobname: "销售部助理",
              upjobid: null,
              depid: 3,
              people: null,
              department: null
            },
            {
              jobid: 10,
              jobcode: null,
              jobname: "助理的助理",
              upjobid: null,
              depid: 3,
              people: null,
              department: null
            }
          ]
        },
        {
          departmentid: 2,
          depname: "质保部",
          deptype: "4",
          depcode: "0200",
          updepid: 0,
          depart: null,
          departments: [
            {
              departmentid: 20,
              depname: "质保1部",
              deptype: "4",
              depcode: "0201",
              updepid: 2,
              depart: null,
              departments: null,
              jobs: []
            },
            {
              departmentid: 21,
              depname: "质保2部",
              deptype: "4",
              depcode: "0202",
              updepid: 2,
              depart: null,
              departments: null,
              jobs: []
            }
          ],
          jobs: [
            {
              jobid: 14,
              jobcode: null,
              jobname: "质保部长",
              upjobid: null,
              depid: 2,
              people: null,
              department: null
            },
            {
              jobid: 15,
              jobcode: null,
              jobname: "部长助理",
              upjobid: null,
              depid: 2,
              people: null,
              department: null
            }
          ]
        }
      ],

我使用：propos 数据配置的

这样树形结构能展示两层数据，我想把jobs 职位信息也放在树形结构上，不知道怎么渲染上去；请各位大佬指点一下。谢谢

Answer 1

核心思想是把 jobs 的 kv 结构转化成和 departments 一致

computed: {
    dataList() {
        return this.deplist.map(item => {
            let deparments = [];
            if (item['deparments'] && item['deparments']['jobs']) {
                deparments = item['deparments']['jobs'].map(every => {
                    return {
                        deparmentid: every.jobid,
                        depname: every.jobname
                    };
                });
            } else {
                deparments = item['deparments'] || [];
            }
            return {
                deparmentid: item.deparmentid,
                depname: item.depname,
                deparments: deparments
            };
        });
    }
}

Answer 2

前端大部分时候都拿不到自己想要的数据结构，但是我们可以自己重新组合数据，变成我们需要的结构。

这里可以用递归，把jobs变成departments

Answer 3

楼主这个问题有没有解决，我也遇到了