美文网首页
react ts常见级联渲染回填不在列表中的数据-合并两个树

react ts常见级联渲染回填不在列表中的数据-合并两个树

作者: 微笑是我_f8bb | 来源:发表于2024-10-31 11:09 被阅读0次

前提是让后端给返回一个当前选择的树
例:

//已选择的树deptsTree,

const deptsTree: any = 
      {
        id: 1,
        parentId: 0,
        children: [
          {
            id: 94,
            parentId: 1,
            children: [
              {
                id: 95,
                parentId: 94,
                children: [],
                sort: 1,
                parentDeptId: 94,
                deptName: '门-叶子',
                level: 3,
                status: 'DISABLE',
                remark: 'ee'
              }
            ]
          }
        ]
      }
    //获取到的列表
    const depList: any= [
      {
        id: 1,
        parentId: 0,
        children: [
          {
            id: 46,
            parentId: 1,
            children: [
              {
                id: 47,
                parentId: 46,
                children: [],
                sort: 3,
                parentDeptId: 46,
                deptName: '板烧鸡腿堡',
                level: 3,
                status: 'ENABLE',
                remark: null
              }
            ],
            sort: 2,
            parentDeptId: 1,
            deptName: '汉堡包',
            level: 2,
            status: 'ENABLE',
            remark: null
          },
          {
            id: 48,
            parentId: 1,
            children: [],
            sort: 2,
            parentDeptId: 1,
            deptName: '披萨',
            level: 2,
            status: 'ENABLE',
            remark: null
          }
        ],
        sort: 1,
        parentDeptId: 0,
        deptName: '大树的根根1',
        level: 1,
        status: 'ENABLE',
        remark: null
      },
      {
        id: 57,
        parentId: 56,
        children: [],
        sort: 11,
        parentDeptId: 56,
        deptName: '二级部门',
        level: 2,
        status: 'ENABLE',
        remark: '11'
      },
      {
        id: 101,
        parentId: 0,
        children: [],
        sort: 99,
        parentDeptId: 0,
        deptName: '称',
        level: 1,
        status: 'ENABLE',
        remark: ''
      },
      {
        id: 70,
        parentId: 69,
        children: [],
        sort: 2343,
        parentDeptId: 69,
        deptName: '测的部',
        level: 3,
        status: 'ENABLE',
        remark: ''
      }
    ]
interface TreeNode {
  id: number
  parentId: number
  children: TreeNode[]
  sort?: number
  parentDeptId?: number
  deptName?: string
  level?: number
  status?: string
  remark?: string
}
//合并方法
export function mergeTrees(deptsTree: TreeNode[], mm: TreeNode): TreeNode[] {
  // 合并节点
  function mergeNodes(nodes: TreeNode[], item: TreeNode) {
    for (const node of nodes) {
      const outIds = nodes.map((el: any) => el.id)
      if (outIds.indexOf(item.id) == -1) {
        nodes.push(item)
        return
      }
      if (node.id == item.id) {
        const childrenIds = node.children.map((el: any) => el.id)
        if (item.children.length > 0 && childrenIds.indexOf(item.children[0].id) == -1) {
          const childItem: any = item.children[0]
          node.children.push(childItem)
          return
        } else {
          if (node.children && node.children.length > 0 && item.children && item.children.length > 0) {
            mergeNodes(node.children, item.children[0])
            break
          }
        }
      }
    }
  }

  mergeNodes(deptsTree, mm)

  return deptsTree
}
let newTree = mergeTrees(res1, deptTree)
console.log()

相关文章

  • 第七节:React列表渲染与数据收集

    1. 列表渲染 1.1 列表渲染说明: 列表渲染 先将列表数据转为React元素列表, 然后在渲染 React会将...

  • 第七节:React列表渲染与数据收集

    1. 列表渲染 1.1 列表渲染说明: 列表渲染 先将列表数据转为React元素列表, 然后在渲染 React会将...

  • React+antd4.9造一个Cascader级联选择轮子

    级联选择获取数据功能,两种方案,一种是搜索的级联,一种是回填的级联,不同的用途 方法也不一样,回填的方法建议做缓存...

  • React性能优化指南

    1、在专用组件中渲染列表 这点在渲染大型数据集合的时候尤为重要。React在渲染大型数据集合时表现的非常差,因为协...

  • React 列表与表单

    列表 在React中,拿到一组数据后,一般会用map方法来遍历渲染。 表单 HTML 表单元素与 React 中的...

  • 算法 - 树

    树 一种分层数据的抽象模型 前端工作中常见的数包括:DOM树、级联选择、树形控件… javascript中没有树,...

  • 数据结构-树

    [TOC] 前端工作中常见的树包括:DOM树、级联选择、树形控件... JS中没有树结构数据,但可以用Object...

  • 「算法归纳」二叉树

    树 一种分层数据的抽象模型 前端工作中常见的树包括:DOM树、级联选择器、树形控件 JS中没有树,但是可以用Obj...

  • React.js 小书 Lesson13 - 渲染列表数据

    React.js 小书 Lesson13 - 渲染列表数据 本文作者:胡子大哈本文原文:http://huzike...

  • react 基本使用

    前端核心问题 如何处理数据和视图之间的关系 react 和 vue 两个区别 => 事件监听 数据渲染 react...

网友评论

      本文标题:react ts常见级联渲染回填不在列表中的数据-合并两个树

      本文链接:https://www.haomeiwen.com/subject/mctbdjtx.html