对element级联组件的数据结构做递归渲染,并通过递归做级联回显
2022/3/10 23:19:01
本文主要是介绍对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级联组件的数据结构做递归渲染,并通过递归做级联回显的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2025-01-07如何利用看板工具优化品牌内容创作与审批,确保按时发布?
- 2025-01-07百万架构师第十一课:源码分析:Spring 源码分析:Spring源码分析前篇|JavaGuide
- 2025-01-07质量检测标准严苛,这 6 款办公软件达标了吗?
- 2025-01-07提升品牌活动管理的效率:看板工具助力品牌活动日历的可视化管理
- 2025-01-07宠物商场的精准营销秘籍:揭秘看板软件的力量
- 2025-01-07“30了,资深骑手” | 程序员能有什么好出路?
- 2025-01-07宠物公园的营销秘籍:看板软件如何帮你精准触达目标客户?
- 2025-01-07从任务分解到资源优化:甘特图工具全解析
- 2025-01-07企业升级必备指南:从传统办公软件到SaaS工具的转型攻略
- 2025-01-07一文告诉你IT项目管理如何做到高效