树形结构数据处理

两种方法：

方法一：使用map

const getData = () => {
    getOrganization({}).then((res) => {
        console.log(res)
        options.value = res.data.map((node) => ({
            id: node.id,
            title: node.title,
            children: node.children
                ? node.children.map((child) => ({
                      id: child.id,
                      title: child.title,
                      children: child.children
                          ? child.children.map((grandchild) => ({
                                id: grandchild.id,
                                title: grandchild.title,
                            }))
                          : [],
                  }))
                : [],
        }))
        console.log(options.value, 'options.value')
    })
}

方法二：使用递归

// 使用递归第一种方法
const props = withDefaults(defineProps<{ orgSelect: OrgSelectProps }>(), {
    orgSelect: () => {
        return {
            managementId: '',
            parkId: '',
            compId: '',
        }
    },
})

const options = ref([])
const getData = () => {
    getOrganization({}).then((res) => {
        options.value = formatTree(res.data, Object.keys(props.orgSelect).length)
    })
}

function formatTree(data: any[], depth) {
    if (depth) {
        return data.map((i) => {
            return {
                id: i.id,
                title: i.title,
                children: formatTree(i.children, depth - 1),
            }
        })
    }
    return null
}


// 使用递归第二种方法
function flattenTreeData(data) {
  const result = []
  
  function flatten(node) {
    // 将当前节点加入结果数组
    result.push({
      id: node.id,
      name: node.name
    })
    
    // 如果当前节点有子节点，继续递归处理
    if (node.children) {
      node.children.forEach(child => flatten(child))
    }
  }
  
  // 对初始数据进行递归处理
  data.forEach(item => flatten(item))
  
  return result
}

const flatData = flattenTreeData(treeData)
console.log(flatData)