vue+element-ui异步加载树结构－前端(全)

╰半夏微凉° 2022-12-15 11:23 90阅读 0赞

element-ui异步加载行政区划树
    功能：进入页面，左侧显示行政区划树的顶级目录，单击目录左侧的箭头，则向后端发送请求，获得该级目录的子目录；以此类推；点击目录本身，则向后端发请求和右边的列表进行联动；
    
    首先说后台返回的数据构成：ａｊａｘ的列表
    	id-uuid label-名称 ztreeType-（0显示行政区划下的子区划，1显示行政区划下的部门） hasChild-是否有子节点
    
    前端树代码：
    	<el-tree
    		:props="defaultProps"  //这个很重要，element-ui的树自带node属性，这个属性要和后端返回的数据映射
    		:expand-on-click-node="false"
    		:filter-node-method="filterNode"
    		:default-expand-all="false"
    		ref="tree"
    		lazy
    		:load="loadNode"
    		node-key="id"
    		highlight-current
    		@node-click="handleNodeClick"
    	>
    	</el-tree> 
    属性：
    	defaultProps:{
    		children:[],
    		label:'label',
    		id:'id',
    		isLeaf:'hasChild'
    	},
    
    方法：
    //筛选节点
    	filterNode(value,data){
    		if(!value) return true;
    		return data.label.indexOf(value)!==-1;
    	}
    //节点单击事件
    	handleNodeClick(data){
    		this.queryParams.deptId = data.id;
    		getList();
    	}
    //异步树叶子节点懒加载逻辑
    	loadNode(node,resolve){
    		//此方法是进入页面后自动运行的,两个参数也是默认加载的
    		//一级节点处理
    		if(node.level==0){
    			this.requestTree(resolve);
    		}
    		//其余节点处理
    		if(node.level>=1){
    			this.getIndex(node,resolve);
    		}
    	},
    //首次加载一级节点数据函数
    	requestTree(resolve){
    		regionTree({regionCode:370000}).then(response=>{
    			response.data.forEach(item=>{
    				if(item.hasChild=='true'){
    					item.hasChild = false
    				}else{
    					item.hasChild = true
    				}
    			})
    			resolve(response.data)
    		}).catch(err=>{})
    	},
    //异步加载叶子节点函数
    getIndex(node,resolve){
    	regionTree({regionCode:node.key}).then(res=>{
    		res.data.forEach(item=>{
    			if(item.hasChild=='true'){
    				item.hasChild = false
    			}else{
    				item.hasChild = true
    			}
    		})
    		resolve(res.data);
    	}).catch(err=>{})
    },