对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://img2022.cnblogs.com/blog/2485085/202203/2485085-20220310123407363-1461054922.png)






### 级联选择器回显:是需要根据当前叶子节点中的value值,找到所有父节点的value值组成一个List<Array>
    因此我们需要通过递归找到每一个叶子节点中所有的父节点的value值并组成一个List<Array>
    
    代码实现:
            let pathList = [];
            function deepData(options, path, pathList) {
              options.forEach((item) => {
                let currentPath = path.concat([item.value]);
                pathList.push(currentPath);
                if (item.children && item.children.length > 0) {
                  deepData(item.children, currentPath, pathList);
                }
              });
               return pathList;
            }


    //调用 deepTopValueList  =  deepData(newTreeData, [], pathList);    
     结果就会得到: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
                }
            }
           
            
posted @ 2022-03-10 13:14  爱划水的小刚哥  阅读(281)  评论(0编辑  收藏  举报