vue前端懒加载--添加一个子节点重新加载树

最新推荐文章于 2024-09-14 10:31:32 发布

战战的坚果

最新推荐文章于 2024-09-14 10:31:32 发布

阅读量2.1k

点赞数

分类专栏：工作中遇到的问题文章标签： vue js

本文链接：https://blog.csdn.net/qq_37342720/article/details/113764208

版权

本文介绍了如何在Vue项目中实现懒加载树，并在新增子节点后刷新树的数据。通过保存初始节点和resolve，当添加子节点时重新加载树，确保数据更新。详细步骤包括初始化树节点的保存和新增节点后的树信息刷新。

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

近日有个需求，需要用懒加载树来实现。同时，新增一个节点后需要重新刷新树的信息。

懒加载树在饿了么官网就可以看到相应组件的使用，话不多说，上代码

首先在最初懒加载树时将node节点及resolve进行保存下来，然后在添加一个子机构后重新加载

1、初始化树时节点信息保存

/懒加载机构树
loadNode: function (node, resolve) {
	var vue=this;
	if (node.level === 0) {
	  var p = vue.$get('/organization/queryOrgTree', {
		params: {
		  orgCode: ""
		}
	  });
	  p.then(function (result) {
		if(result.code==200){
		  var data = result.data.orgList;
		  vue.orgInfo.orgCode=data[0].orgCode;
		  vue.orgInfo.orgName=data[0].orgName;
		  vue.orgCodeMain=data[0].orgCode;  //将该节点的编号及对应信息进行保存
		  vue.orgNameMain=data[0].orgName;
		  console.log(data);
		  resolve(data);
		  vue.node = node; //将node节点进行赋值
		  vue.resolve = resolve;  //将resolve进行赋值
		}else{
		  vue.$message.error(result.message);
		  resolve();
		  return;
		}
	  }).catch(function (err) {
		console.log(err.message);
	  });
	}
	if (node.level > 0) {
	  vue.queryOrgTreeByOrgCode(node, resolve)
	}
},

2、新增子机构信息重新加载树信息

//新增子机构信息
insertOrgInfo(){
	var vue=this;
	vue.orgInsertInfo.parentCode=vue.orgInfo.orgCode;
	console.log(JSON.stringify(vue.orgInsertInfo)+"++++++++++++++")
	vue.$refs['orgInfo'].validate((valid) => {
	  if (valid) {
		var p = this.$post('/organization/updateOrgInfo',{
		  data: vue.orgInsertInfo
		});
		p.then(function(result) {
		  if(result.code=='200'){
			vue.$alert(result.message, {
			  confirmButtonText: '确定',
			  iconClass:"el-icon-success",
			  customClass:"message_box_alert",
			});
			vue.showInsertOrgFlag=false;
			//重新加载左侧机构树 开始 *****
			let node = vue.$refs.treeOrg.getNode(vue.orgCodeMain); // 通过节点id找到对应树节点对象
			node.loaded = false;
			node.isLeaf = false;
			node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
			vue.orgInfo.orgCode=vue.orgCodeMain;
			vue.orgInfo.orgName=vue.orgNameMain;
			//重新加载左侧机构树 结束 *****
		  }else{
			vue.$alert(result.message, {
			  confirmButtonText: '确定',
			  iconClass:"el-icon-warning",
			  customClass:"message_box_alert",
			});
		  }
		}).catch(function(err) {
		  console.log(err.message);
		});
	  }else {
		setTimeout(() => {
		  var isError = document.getElementsByClassName("is-error");
		  isError[0].querySelector("input").focus();
		}, 100);