分享关于递归树形结构增删改查的方法

在使用树形节点或级联组件时常常会碰到根据id处理数据的情况
下面为大家简单介绍关于节点递归增删改查方法

1. 根据目标id删除指定节点

/**  * 根据目标id删除指定节点  * @param {*} list 数据源  * @param {*} targetId 目标id  */ function deleteNodeById(list, targetId) {   if (!list) return   list.forEach((item, index) => {     if (item.id === targetId) {       list.splice(index, 1)       return     } else {       if (Array.isArray(item.children) && item.children.length) {         deleteNodeById(item.children, targetId)       }     }   }) } 

2. 根据目标id查找指定节点

/**  * 根据目标id查找指定节点  * @param {*} list 数据源  * @param {*} targetId 目标id  */ function selectNodeById(list, targetId) {   if (!list) return   let nodeTree = null   for (let i = 0; i < list.length; i++) {     if (nodeTree !== null) break     let node = list[i];     if (node.id === targetId) {       nodeTree = node       break     } else {       if (Array.isArray(node.children) && node.children.length) {         nodeTree = selectNodeById(node.children, targetId)       }     }   }   return nodeTree } 

3. 添加节点到目标id下

/**  * 添加节点到目标id下  * @param {*} list 数据源  * @param {*} targetId 目标id  * @param {*} obj 目标对象  */ function appendNodeById(list, targetId, obj) {   if (!list) return   list.forEach(item => {     if (item.id === targetId) {       item.children ? item.children.push(obj) : item['children'] = obj     } else {       if (Array.isArray(item.children) && item.children.length) {         appendNodeById(item.children, targetId, obj)       }     }   }) } 

4. 修改目标id数据

/**  * 修改目标id数据  * @param {*} list 数据源  * @param {*} targetId 目标id  * @param {*} obj 目标对象  */ function updateNodeById(list, targetId, obj) {   if (!list) return   list.forEach((item, index) => {     if (item.id === targetId) {       list.splice(index, 1, obj)       return     } else {       if (Array.isArray(item.children) && item.children.length) {         updateNodeById(item.children, targetId, obj)       }     }   }) } 

欢迎大家评论，如有帮助可以关注+收藏，我会经常更新博客，大家一起讨论学习