vue3+ts，处理树形结构数据

写一个方法从接口获取数据：

onMounted(() => {
    loading()
})
 
const loading = () => {
    adminCountriesCountriesIndex().then((res) => {
        loadingShow.value = false
        handleTreeData(res.data)
    })
}

编写一个方法用来处理数据，并在上面调用

 
const handleTreeData = (data: any) => {
    const result: any[] = []
    let index = 0 // 声明一个变量用于保存索引值
    for (const key in data) {
        const children: any[] = []
 
        for (const key2 in data[key]) {
            const countryState = data[key][key2]
 
            children.push({
                id: countryState['id'],
                label: countryState['default_name'],
                status: countryState['status'],
                name: '城市',
            })
            index++ // 每次循环结束后增加索引值
        }
 
        result.push({
            id: index,
            label: data[key][0]['country_code'],
            name: '国家',
            children: children,
        })
        index++ // 每次外部循环结束后增加索引值
    }
    treeData.value = result
    return result
}

调用后result就是处理后的树形数据结构了，