el-tree默认展示到指定的某一级

本文详细解析了使用嵌套循环遍历复杂数据树结构的方法,通过具体示例展示了如何逐层深入获取ID信息,适用于前端开发中处理多层次数据结构的场景。

原来的样子

要展示到截面这一层级

官方说是拿到上面的id放入数组中

设置相关的数值   在去循环我们的datatree数据

打印出来是这些id

效果入下

循环的代码

     for (let i = 0; i < that.data.length; i++) {
           if (that.data[i].children.length>0) {
             for (let j = 0; j < that.data[i].children.length; j++) {
               
               if (that.data[i].children.length>0) {
                 for (let k = 0; k < that.data[i].children[j].children.length; k++) {
               
                      arr.push(that.data[i].children[j].children[k].id)
                 
                 }
               }
                
               
             }
           }
        that.Arr=arr
        console.log(that.Arr)
      }

 

回答: 要实现el-tree默认打开第一级,可以使用default-expanded-keys属性来指定默认展开的节点。在引用\[1\]中的代码中,可以将default-expanded-keys属性设置为treeData数组的第一个id,即default-expanded-keys="\[treeData\[0\].id\]"。这样就可以实现el-tree默认打开第一级节点。另外,在引用\[2\]中提到的default-expanded-keys属性的使用方法也是有效的,只是看起来比较复杂。在查询树形结构的地方给treeData赋值时,可以将第一个id放入treeExpandData数组中,然后将treeExpandData赋值给default-expanded-keys属性。这样也可以实现el-tree默认打开第一级节点。 #### 引用[.reference_title] - *1* *3* [关于element tree树形结构设置默认展开第一级,第二级,第三级,以此类推](https://blog.youkuaiyun.com/WHB20126/article/details/115390555)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [el-tree 默认展开第一级节点](https://blog.youkuaiyun.com/weixin_69811594/article/details/128469378)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值