树根据id查找节点

Ciwei蓝

已于 2023-11-14 10:55:06 修改

阅读量1k

点赞数

分类专栏： js 文章标签：前端 javascript vue.js

于 2023-07-21 09:36:29 首次发布

本文链接：https://blog.csdn.net/Blue54/article/details/131844936

版权

js 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

5、给树节点任意字段添加一个随机数id，随机数id自己写

1、根据id查找节点

  // 根据id查找节点
     findNodeById (nodes, id, idName = 'setKey', childrenName = 'children') {
      for (const node of nodes) {
        console.log(node)
        if (node[idName] === id) {
          return node
        }
        if (node[childrenName]) {
          const foundNode = this.findNodeById(node.children, id, idName, childrenName)
          if (foundNode) {
            return foundNode
          }
    }
  }
  return null
},

2、根据id修改节点的字段

    // 根据id修改节点的字段
     modifyNodeById (id, form) {
         const node = this.findNodeById(this.rulesValue, id, 'setKey', 'rules')
         if (node) {
           // node = form
           Object.assign(node, form)
         }
},

3、根据id删除节点

// 根据id删除节点
    deleteObjectById (id, data, idName = 'id', childrenName = 'children') {
          for (let i = 0; i < data.length; i++) {
            if (data[i][idName] === id) {
              data.splice(i, 1) // 删除对应的对象
              return
            }
            if (data[i][childrenName]) {
              this.deleteObjectById(id, data[i][childrenName], idName, childrenName) // 递归遍历子节点
            }
          }
},

4、删除树结构的所有指定字段

    /** @description 删除树结构的所有指定字段 */
    removeProperties (data) {
      data.forEach(node => {
        if (node.children) {
          node.rules = node.children // 将children属性赋值给rules属性
          delete node.children // 删除children属性
        }
        delete node.setKey // 删除id属性
        if (node.rules) {
          this.removeProperties(node.rules) // 递归遍历子节点
        }
      })
    },

5、给树节点任意字段添加一个随机数id，随机数id自己写

addId (tree) {
      return tree.map(item => {
        const data = item.rules ? this.addId(item.rules) : null
        return {
        ...item,
        setKey: uuid(),
        rules: data, // 这里要判断原数据有没有子级如果没有判断会报错
        children: data,
      }
})
    },