标签：级联 递归 回显 orgname List value item orgid progid

假如后端返回的数据结构是里面不包含label，和value字段，此时我们就需要通过递归来遍历出一个带有lable和value字段的树结构，以方便在页面渲染赋值
 例如后端返回的树结构为：
let res =  [{
    "orgid": 1,
    "orgname":'研发',
    "progid": '001',
    'List': [
        {
            "orgid": 2,
            "orgname":'研发1',
            "progid": '004',
            'List': [
                {
                    "orgid": 3,
                    "orgname":'研发2',
                    "progid": '005',
                    'List':[]
                }
            ]
        }
    ]
},
{
    "orgid": 1,
    "orgname":'投资',
    "progid": '002',
    'List': [
        {
            "orgid": 2,
            "orgname":'投资1',
            "progid": '006',
            'List': [
                {
                    "orgid": 3,
                    "orgname":'投资2',
                    "progid": '007',
                    'List': [
                        {
                            "orgid": 4,
                            "orgname":'投资3',
                            "progid": '008',
                            'List':[]
                        }
                    ]
                }
            ]
        }
    ]
    },
    {
        "orgid": 1,
        "orgname":'生产',
        "progid": '003',
        'List': [
            {
                "orgid": 2,
                "orgname":'生产1',
                "progid": '009',
                'List': [
                    {
                        "orgid": 3,
                        "orgname":'生产2',
                        "progid": '010',
                        'List': [
                            {
                                "orgid": 4,
                                "orgname":'生产3',
                                "progid": '011',
                                'List':[]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]
 

### 深度遍历后端返回的树结构：
        function deepTreeData (treeData) {
          let arr = [];
          let obj = {};
          treeData.forEach( item => {
           if( Array.isArray(item.List) && item.List.length > 0) {
               item.List = deepTreeData (item.List);
                obj = {
                  label:item.orgname,
                  value: item.progid,
                  children: item.List
                }
            }else{
                 item.List = undefined;     // 防止最后一级的叶子节点获取不到数据页面渲染为空的bug
                 obj = {
                  label:item.orgname,
                  value: item.progid,
                  children: item.List
                }
            }
              arr.push(obj)
            })  
             return arr;
       }


    // 调用：let newTreeData =  deepTreeData (res) 接口获取到想到的字段数结构
             ![](https://www.icode9.com/i/l/?n=22&i=blog/2485085/202203/2485085-20220310123407363-1461054922.png)






### 级联选择器回显：是需要根据当前叶子节点中的value值，找到所有父节点的value值组成一个List<Array>
    因此我们需要通过递归找到每一个叶子节点中所有的父节点的value值并组成一个List<Array>
    
    代码实现：
      let deepTopValueList = [];

      function deepTree( deepTopValueList, option, List ) {
            option.forEach( item ) {
              let tempList = List.concat();
              tempList.push( item.value );
              deepTopValueList.push( tempList );
             if(item.List !== '' &&  Array.isArray(item.List.length) && item.List.length > 0) { 
                deepTree( newList, item.List, tempList)
            }
          }
          return deepTopValueList
        }


    //调用 deepTopValueList  =  deepTree（ deepTopValueList ,newTreeData，[] ）
     结果就会得到：deepTopValueList  =  [
                      ['001'],
                      ['001','004'],
                      ['001','004','005'],
                      ['002'],
                      ['002','007'],
                      ['002','007','008'],
                      ['003'],
                      ['003','009'],
                      ['003','009','010'],
                      ['003','009','010','011'],
                    ] 
      当我们选中某一条table中的数据时，找到当前选中数据的value值，通过遍历deepTopValueList数据，找到item数组中的最后一项比较，相等的话就返回当前value对应所有的父节点item<Array>
            deepTopValueList.forEach( item ) {
                if( item[item.length - 1] == value) {
                  return item
                }
            }
           
            

标签：级联,递归,回显,orgname,List,value,item,orgid,progid
来源： https://www.cnblogs.com/xqy183011/p/15989064.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。