后台返回两种情况的数据:一种是没有包含上下级关系,需要自己手动处理一下上下级关系,通过parentId或pid来判断上下级关系,具体代码如下:

let list = {
  msg: "操作成功",
  code: 200,
  data: [
    {
      deptId: 100,
      parentId: 0,
      ancestors: "0",
      deptName: "若依科技",
      orderNum: "0",
      parentName: null,
      children: [],
    },
    {
      deptId: 101,
      parentId: 100,
      deptName: "深圳总公司",
      orderNum: "1",
      parentName: null,
      children: [],
    },
    {
      deptId: 102,
      parentId: 100,
      deptName: "长沙分公司",
      orderNum: "2",
      parentName: null,
      children: [],
    },
    {
      deptId: 103,
      parentId: 101,
      deptName: "研发部门",
      orderNum: "1",
      parentName: null,
      children: [],
    },
    {
      deptId: 104,
      parentId: 101,
      deptName: "市场部门",
      orderNum: "2",
      parentName: null,
      children: [],
    },
    {
      deptId: 105,
      parentId: 101,
      deptName: "测试部门",
      orderNum: "3",
      parentName: null,
      children: [],
    },
    {
      deptId: 106,
      parentId: 101,
      deptName: "财务部门",
      orderNum: "4",
      parentName: null,
      children: [],
    },
    {
      deptId: 107,
      parentId: 101,
      deptName: "运维部门",
      orderNum: "5",
      parentName: null,
      children: [],
    },
    {
      deptId: 108,
      parentId: 102,
      ancestors: "0,100,102",
      deptName: "市场部门",
      orderNum: "1",
      parentName: null,
      children: [],
    },
    {
      deptId: 109,
      parentId: 102,
      ancestors: "0,100,102",
      deptName: "财务部门",
      orderNum: "2",
      parentName: null,
      children: [],
    },
  ],
};
function formatToTree(ary, pid) {
  return ary
    .filter((item) =>
      // 如果没有父id(第一次递归的时候)将所有父级查询出来
      // item.parentId === 0 就是最顶层
      pid === undefined ? item.parentId === 0 : item.parentId === pid
    )
    .map((item) => {
      // 通过父节点ID查询所有子节点
      item.children = formatToTree(ary, item.deptId);
      return item;
    });
}
console.log(formatToTree(list.data));

第二种情况就是包含上下级关系,但是返回的数据和组件要求的数据有一些偏差,需要自己处理一下,比如增加一些属性之类,代码如下:

let data = [
  {
    id: "dd420051522843febd203b05230f4024",
    parentId: "",
    children: [
      {
        id: "017b480f678b4f76b914e50d54846d2f",
        parentId: "dd420051522843febd203b05230f4024",
        children: [],
      },
      {
        id: "05fc4f2c5f7840f9b369c489aced419c",
        parentId: "dd420051522843febd203b05230f4024",
        children: [],
      },
    ],
  },
  {
    id: "dd420051522843febd203b05230f40242",
    parentId: "",
    children: [
      {
        id: "017b480f678b4f76b914e50d54846d2f2",
        parentId: "dd420051522843febd203b05230f40242",
        children: [],
      },
    ],
  },
];
const fTreeLoop = (data) => {
  let newData = [];
  for (const [index, item] of data.entries()) {
    const { children, id } = item;
    newData[index] = Object.assign({}, item, { title: id, children: [] });
    if (children && children.length > 0) {
      newData[index].children = fTreeLoop(children);
    }
  }
  return newData;
};
console.log(fTreeLoop(data));

Logo

快速构建 Web 应用程序

更多推荐