注:此树形结构的操作,不能使用异步加载,否则无法进行实时更新(使用异步加载时,需要通过刷新接口才能动态改变)
实时更新删改的核心代码:

searchTree(option, arr, type = 'dele'){  //参数:查找的节点数据、被查找的树、操作类型(不传时,默认为删除)
	 for (let s = 0; s < arr.length; s++) {
	     if (arr[s].id === option.id) {  //id为树结构唯一key值
	         if (type === 'dele') {
	             arr.splice(s, 1)  //找到后,若type为‘dele’,则直接从arr中删除
	         } else {    //否则,为修改,替换内容
	             this.$set(arr, s,option)
	         }
	         break
	     } else if (arr[s].children && arr[s].children.length > 0) { // 递归条件
	         this.searchTree(option, arr[s].children,type)
	     } else {
	         continue
	     }
	 }
},

实时更新增的核心代码:

AddSearchTree(option, arr, newChild){ //参数:当前选中节点、树、要添加的节点信息
	for (let s = 0; s < arr.length; s++) {
	     if (arr[s].id === option.id) {  //id为节点唯一key值
	         arr[s].children.unshift(newChild)  //新增数据作为选中节点的子节点进行头插
	         break;
	     } else if (arr[s].children && arr[s].children.length > 0) { // 递归条件
	         this.AddSearchTree(option, arr[s].children,newChild)
	     } else {
	         continue
	     }
	 }
},
Logo

前往低代码交流专区

更多推荐