对element级联组件的数据结构做递归渲染，并通过递归做级联回显

本文主要是介绍对element级联组件的数据结构做递归渲染，并通过递归做级联回显，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

假如后端返回的数据结构是里面不包含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.www.zyiz.net/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
                }
            }
           
            

这篇关于对element级联组件的数据结构做递归渲染，并通过递归做级联回显的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！