省市区联动数据处理

最新推荐文章于 2024-05-08 12:42:46 发布

砖业二十年

最新推荐文章于 2024-05-08 12:42:46 发布

阅读量140

点赞数

文章标签： servlet html java-ee

本文链接：https://blog.csdn.net/weixin_46930751/article/details/129802292

版权

这段代码展示了如何在JavaScript中处理树形数据结构。getTree函数获取指定id的树数据，然后通过formatTree将数据转换为文本-value格式。mapData函数用于在指定id位置插入新数据，通过递归处理子节点。最后，dataTree存储了处理后的树形结构数据。

摘要由CSDN通过智能技术生成

            getTree(id) {
               getTreeData({id}).then(res => {
                   const list=   this.formatTree(res) //返回的数据
                   var data=this.dataTree;
                   if(id!="1"){ //第一级处理
                       this.dataTree=this.mapData(data,id,list)
                   }else{
                       this.dataTree=list
                   }
               })
           },
           mapData(data,id,list){ //data :根数据 ;id 插入指定目录的id; list 接口返回的数据
               var arr=data.map((item,key)=>{
                       if(id==item.value){
                           return{
                               ...item,
                               children:list
                           }
                       }else{

//递归查询子级列表
                           if(item.children){
                               return {
                                   ...item,
                                   children:this.mapData(item.children,id,list)
                               }
                           }else{
                               return item
                           }

                       }
                   })
                   return arr
           },
           formatTree(data){
               const list=data.map((item,key)=>{
                   return{
                       text:item.name,
                       value:item.code,
                   }
               })
               return list
           },

返回结构：

dataTree: [{
					text: "一年级",
					value: "1-0",
					children: [{
						text: "1.1班",
						value: "1-1"
					},
					{
						text: "1.2班",
						value: "1-2"
					}]
				},
				{
					text: "二年级",
					value: "2-0",
					children: [{
						text: "2.1班",
						value: "2-1"
					},
					{
						text: "2.2班",
						value: "2-2"
					}]
				},
				{
					text: "三年级",
					value: "3-0",
					disable: true
				}]