Element-Ui级联选择器递归显示某一级树形结构数据

是小橙丶

已于 2023-04-13 10:16:09 修改

阅读量1.2w

点赞数 3

分类专栏： Vue 文章标签： vue.js

于 2022-04-01 13:49:43 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42125732/article/details/123895742

版权

Vue 专栏收录该内容

34 篇文章

订阅专栏

博主分享了在业务场景中遇到的问题，即如何在二次创建时根据一次创建的选择回显级联选择器的数据。后端返回的数据是树形结构，博主通过递归算法实现查找并显示选中的数据及其子节点。递归函数`recursiveFindWarZone`接收code码和数据数组，遍历并查找匹配的节点。在找到节点后，返回该节点以展示在级联选择器中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

博主遇到了业务场景有一次创建/二次创建时，当一次创建选择了对应的树形结构数据如下

二次创建时需要回显第一次创建时选中的级联选择器的数据，级联选择器只显示该当前数据以及下级的树形结构数据，效果如下

后端返回数据的结构如下图所示

因此需要通过递归拿到对应的数据，递归算法如下

//code 是后台返回你对应的code码 list是你原来的数组数据
recursiveFindWarZone(code, list) {
        let findZone = null
        const searchWarZone = (code, list) => {
          list.forEach((zone) => {
            if (zone.salesOrgCode== code) findZone = zone
            if (!findZone && zone.orgs) {
              searchWarZone(code, zone.orgs)
            }
          })
        }
        searchWarZone(code, list)
        return findZone
},
this.recursiveFindWarZone(res.salesOrgCode, this.treeList[0])