el-tree如何获取树结构中指定节点数据，并且保持原有层级结构

let ids = [11, 100, 200]; // 要获取的 id 列表
let treeData = [
  {
    id: 1,
    name: '1',
    children: [
      {
        id: 10,
        name: '1-1',
        children: [
          {
            id: 100,
            name: '1-1-1',
            children: []
          },
          {
            id: 101,
            name: '1-1-2',
            children: []
          }
        ]
      },
      {
        id: 11,
        name: '1-2',
        children: [
        ]
      },
      {
        id: 12,
        name: '1-3',
        children: [
          {
            id: 103,
            name: '1-3-1',
            children: []
          },
          {
            id: 104,
            name: '1-3-2',
            children: []
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: '2',
    children: [
      {
        id: 20,
        name: '2-1',
        children: [
          {
            id: 200,
            name: '2-1-1',
            children: []
          }
        ]
      },
      {
        id: 21,
        name: '2-2',
        children: []
      }
    ]
  }
];

假设树的深度为3，按照id列表去遍历匹配，如果二级节点有children那么就从三级节点进行过滤，如果没有就从当前二级节点进行过滤，过滤掉不匹配的节点，并且保留原有层级结构。

函数转换树形结构

treeFilter (tree, func) {
  return tree.map(node => ({ ...node })).filter(node => {
    node.children = node.children && treeFilter(node.children, func)
    return func(node) || (node.children && node.children.length)
  })
}

数据打印

const result = treeFilter(treeData, node => ids.includes(node.id))

 

  // allKey保存 树形结构的父子key组合id数组 被选中的节点的 key 所组成的数组

      this.allKey = [].concat(this.$refs.tree.getCheckedKeys(), this.$refs.tree.getHalfCheckedKeys())

      // 获取树结构中指定节点数据，并且保持原有层级结构 把数据合成接口需要的格式

      const selData = this.treeFilter(this.addMenuList, node => this.allKey.includes(node.id))