vue数据转换树形级别

  // 定义模板
    <template>
         <div>
             <el-tree                  
                :data="tree.treeData"           
                :props="tree.treeDataProps"
                node-key="_id"
                accordion
                ref="tree"   
                :expand-on-click-node="false"
                highlight-current                     
                >
                 <template  #default="{ node, data }">               
                        <span class="custom-tree-node">   
                               {{ data.name }}   
                        </span>
                    </template>
                </el-tree>
         </div>   
    </template>
    
    // 定义数据    
    setup(){
        const tree = reactive({
                    treeData:[],// 树形
                    treeDataProps: {
                        label: 'name',
                        children: 'children',
                        id: '_id'
                    },
           })
    }
    

    //方法 调用
    treeDataList（列表的数据）
    // 数据转化为树形
            const treeDataList = (data) =>{
                // 将数据存储为 以 id 为 KEY 的 map 索引数据列
                let map = {};
                data.forEach(function (item) {
                    map[item._id.toString()] = item;
                });
                let val = [];
                for (let item of data) {
                    // 以当前遍历项的parentId,去map对象中找到索引的id
                    let parent = map[item.parentId];
                    // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
                    if (parent) {
                        (parent.children || (parent.children = [])).push(item);
                    } else {
                    //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
                    val.push(item);
                    }
                }
                proxy.$nextTick(()=>{
                     tree.treeData = val // 树上的数据
                })           
               
            }