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

element-ui异步加载行政区划树
功能:进入页面,左侧显示行政区划树的顶级目录,单击目录左侧的箭头,则向后端发送请求,获得该级目录的子目录;以此类推;点击目录本身,则向后端发请求和右边的列表进行联动;

首先说后台返回的数据构成:ajax的列表
	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=>{})
},

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值