antd vue中树形控件动态增删改操作
注:此树形结构的操作,不能使用异步加载,否则无法进行实时更新(使用异步加载时,需要通过刷新接口才能动态改变)实时更新删改的核心代码:searchTree(option, arr, type = 'dele'){//参数:查找的节点数据、被查找的树、操作类型(不传时,默认为删除)for (let s = 0; s < arr.length; s++) {if (arr[s].id === op
·
注:此树形结构的操作,不能使用异步加载,否则无法进行实时更新(使用异步加载时,需要通过刷新接口才能动态改变)
实时更新删改的核心代码:
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
}
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)