Vue前端

1.树形结构转数组

vue+ts写法：

  //树形转换成数组
  const treeToList = (tree: Tree[]) => {
    const result = ref<Tree[]>([])
    
    //先将每个父节点push进去
    const pushList = (treeItem: Tree) => {
      result.value.push({
        id: treeItem.id,
        parentId: treeItem.parentId,
        code: treeItem.code,
        label: treeItem.label,
        icon: treeItem.icon,
        orderNum: treeItem.orderNum,
        remark: treeItem.remark,
      })
      //若该父节点有孩子
      if (treeItem.children) {
        for (const v of treeItem.children) {
          pushList(v)
        }
      }
    }
    //@ts-ignore 将形参数组丢进去实现扁平化
    tree!.value.forEach((item: Tree) => {
      pushList(item)
    })
    return result.value
  }

展开前:

平铺展开后：可以看到id = 1的子节点被展开

2.数组转树形结构

思路：

   //Array是平铺的数组
   let result = []
   Array.forEach(item => {
            if (item.parentId === null) {
              result.push({
                value: item.id,
                label: item.name
              })
            }
          })
          if (result.length > 0) {
            digui(result, Array)
          }
          
   digui(result, allData) {
      for (let data of result) {
        allData.forEach(item => {
        //找到该节点对应的父节点，做它的子节点
          if (data.value === item.parentId) {
            if (!data.children) {
              data.children = []
            }
            data.children.push({
              value: item.id,
              label: item.name
            })
          }
        })
        if (data.children) {
          digui(data.children, allData)
        }
      }
    }

操作后对比：