Vue3非递归渲染Tree组件的初步实现代码

[
  {
    label: '前端',
    id: 'frontend'
  },
  {
    label: 'java',
    id: 'java',
    expanded: true,
    children: [
      { label: '11', id: '11' },
      { label: '22', id: '22' },
      { label: '33', id: '33' },
      {
        label: '44',
        id: '44',
        expanded: true,
        children: [
          {
            label: 'aaa',
            id: 'aaa',
            expanded: true,
            children: [
              { label: 'a11', id: 'a11' },
              { label: 'a22', id: 'a22' }
            ]
          },
          {
            label: 'bbb',
            id: 'bbb',
            expanded: false,
            children: [
              { label: 'b11', id: 'b11' },
              { label: 'b22', id: 'b22' }
            ]
          }
        ]
      },
      { label: '55', id: '55' },
      { label: '66', id: '66' },
      { label: '77', id: '77' },
      {
        label: 'Java基础',
        id: 'javaBasic'
      },
      {
        label: 'Java Web',
        id: 'javaWeb',
        children: [
          {
            label: 'ssm',
            id: 'ssm'
          }
        ]
      }
    ]
  },
  {
    label: '数据库',
    id: 'db',
    expanded: false,
    children: [
      {
        label: '关系型数据库',
        id: 'relationShipDB'
      },
      {
        label: '非关系型数据库',
        id: 'nonRelationShipDB'
      }
    ]
  }
]

// 定义基本的树节点类型
export interface ITreeNode {
  label: string // 节点标签名
  id?: string // 节点id，可为空
  children?: ITreeNode[] // 子节点列表，可为空
  expanded?: boolean //是否展开，空则表示默认折叠
}

function copyArr(arr: number[]) {
  return arr.reduce((result, cur) => {
    return result.concat(cur)
  }, [] as number[])
}
const newArr = copyArr([1, 2, 3])
console.log(newArr)

npm i -g ts-node@10.9.2

{
    ...
    "ts-node": {
        "esm": true
    },
    ...
}

import { ITreeNode } from './types'

export function generateFlatTree(tree: ITreeNode[]): ITreeNode[] {
  return tree.reduce((prev, cur) => {
    if (cur.children) {
      // 递归，得到子节点拍平的数组
      const children = generateFlatTree(cur.children)
      return prev.concat(cur, children)
    } else {
      return prev.concat(cur)
    }
  }, [] as ITreeNode[])
}

...
// 扩展层级关系，用于拍平结构的树节点
export interface IFlatTreeNode extends ITreeNode {
  parentId?: string // 父节点id，若是一级节点则为空
  level: number // 节点层级，数值从1开始
  isLeaf: boolean //是否为叶子节点
  originalNode: ITreeNode // 指向对应的原始节点
}

import { IFlatTreeNode, ITreeNode } from './types'

/**
 *
 * @param tree 当前层级的节点列表
 * @param level 表示当前节点所处的层级
 * @param pid 父节点id
 */
export function generateFlatTree(tree: ITreeNode[], level = 0, pid = ''): IFlatTreeNode[] {
  level++ // 层级加1
  // 巧用数组的reduce方法对嵌套的树形结构进行拍平处理，prev为当前层级要处理的拍平结构结果，cur为当前遍历的节点
  return tree.reduce((prev, cur) => {
    // 拷贝当前节点
    const o = { ...cur } as IFlatTreeNode
    // 绑定关系
    o.originalNode = cur
    o.level = level
    // 为内层节点设置父id
    if (level > 1 && pid) {
      o.parentId = pid
    }
    // 判断当前节点是否存在children，如果存在则递归处理
    if (o.children) {
      // 以当前节点作为父节点，对子节点列表做递归处理，得到内部拍平的内容
      const children = generateFlatTree(o.children, level, o.id!)
      // 移除嵌套结构
      delete o.children
      // 在已经拍平的结构基础上再拼接当前节点和内部拍平节点
      o.isLeaf = false
      return prev.concat(o, children)
    } else {
      // 叶子节点，处理会更简单
      o.isLeaf = true
      return prev.concat(o)
    }
  }, [] as IFlatTreeNode[])
}

import { ExtractPropTypes, PropType } from 'vue'
// 树数据的属性定义
export const props = {
  data: {
    // 类型为一个元素为ITreeNode类型的数组
    type: Object as PropType<Array<IFlatTreeNode>>,
    required: true
  }
} as const // 设置为常量，外部无法修改
// 提取tree组件的属性定义类型
export type Props = ExtractPropTypes<typeof props>
...

import { defineComponent } from 'vue'
import { props, Props } from './types'

export default defineComponent({
  name: 'JuanTree',
  props,
  setup(props: Props) {
    // 解构出传入的tree数据
    const { data } = props
    return () => {
      return (
        <div class='juan-tree'>
          {/* 相当于v-for */}
          {data.map((treeNode) => (
            <div
              key={treeNode.id}
              class='juan-tree-node'
              style={{
                /* 树的层级缩进 */
                paddingLeft: `${24 * (treeNode.level - 1)}px`
              }}
            >
              {treeNode.label}
            </div>
          ))}
        </div>
      )
    }
  }
})

import { defineComponent } from 'vue'
import JuanTree from './components/tree'
import { generateFlatTree } from './components/tree/utils'
import { ITreeNode } from './components/tree/types'

export default defineComponent({
  setup() {
    // 这里数据省略
    const treeData = [...] as ITreeNode[]
    return () => {
      // 树的扁平化处理
      const flatTree = generateFlatTree(treeData)
      return (
        <div class='m-4'>
          <JuanTree class='bg-gray-200' data={flatTree}></JuanTree>
        </div>
      )
    }
  }
})

if (o.children) {
  const children = generateFlatTree(o.children, level, o.id!)
  console.log(o.id + '子节点长度：' + children.length)
  ...
}

export interface IFlatTreeNode extends ITreeNode {
  ...
  length: number // 所有子孙节点的长度
}

if (o.children) {
  const children = generateFlatTree(...)
  // 记录当前节点子代的长度
  o.length = children.length
  ...
}

// 让其变为响应式数据以加入计算属性的计算
const flatData = ref(data)
// 获取那些展开的节点列表
const expandedTree = computed(() => {
  const result = []
  // 循环列表，跳过那些非expanded
  for (let i = 0; i < flatData.value.length; i++) {
    const item = flatData.value[i]
    // 当当前节点处于折叠状态，它的子节点应该被排除
    if (!item.isLeaf && item.expanded !== true) {
      // 跳过内部所有的节点
      i += item.length
    }
    result.push(item)
  }
  // 得到折叠后的新节点列表
  return result
})

<div ...>
  {expandedTree.value.map((treeNode) => (
    ...
  ))}
</div>

<div ...>
  {treeNode.isLeaf ? (
    /* 叶子节点临时展示，留出间距，确保同级的父节点和叶子节点对齐 */
    <span class='mr-1 inline-block w-[20px]'></span>
  ) : (
    <button class='mr-1 inline-block h-[18px] w-[20px]'>
      {/* 父节点的展开/折叠操作临时用+、-代替 */}
      {treeNode.expanded ? <span>-</span> : <span>+</span>}
    </button>
  )}
  {treeNode.label}
</div>

const toggleNode = (node: ITreeNode) => {
  // 对展开状态取反
  node.expanded = !node.expanded
}