关于前端:关于antdesignvue的atree搜索不能自动展开超过2级的树

最近在应用a-tree增加搜寻的时候发现了一个问题；只有树节点超过2级，对第三级及以下级数进行搜寻的时候毫无反馈

a-tree

a-tree 实现了通过expandeKeys来设定须要开展的树节点Key，再设置autoExpandParent来开展举个例子：

组件 ：

<a-tree
  :tree-data="treeData"
  :expandedKeys="expandedKeys"
  @select="clickTree"
  @expand="onExpand"
  :auto-expand-parent="autoExpandParent"
>

咱们晓得，想要开展只有设置autoExpandParent为true，再把须要开展的节点设置到expandeKeys外面即可

官网的办法：

onChange(e) {
  const value = e.target.value;
  const expandedKeys = dataList
    .map(item => {
      if (item.title.indexOf(value) > -1) {
        return getParentKey(item.key, gData);
      }
      return null;
    })
    .filter((item, i, self) => item && self.indexOf(item) === i);
  Object.assign(this, {
    expandedKeys,
    searchValue: value,
    autoExpandParent: true,
  });
},

这个办法理论能够失去对应的搜寻到的节点父节点，然而在超过2级的树节点就呈现了问题，不能开展

而后我对其办法进行了革新，想着是不是把以后的父节点拿到进行开展并不够，要把父节点的父节点的父节点都拿到呢~（就是始终拿到根节点啦）

搜寻办法

treeSearch(e) {
  const value = e.target.value;
  if (!value) return;
  this.searchValue = value
  if (this.searchValue === '') {
    this.expandedKeys = []
  } else {
    this.expandedKeys = []
    this.backupsExpandedKeys = []
    const candidateKeysList = this.getkeyList(
      this.searchValue,
      this.treeData,
      []
    )
    candidateKeysList.forEach((item) => {
      const key = this.getParentKey(item, this.treeData)
      // eslint-disable-next-line no-shadow
      if (
        key &&
        !this.backupsExpandedKeys.some((item) => item === key)
      )
        this.backupsExpandedKeys.push(key)
    })
    const { length } = this.backupsExpandedKeys
    // eslint-disable-next-line no-plusplus
    for (let i = 0; i < length; i++) {
      this.getAllParentKey(
        this.backupsExpandedKeys[i],
        this.treeData
      )
    }
    this.expandedKeys = this.backupsExpandedKeys.slice()
  }
},
getkeyList(value, tree, keyList) {
  // eslint-disable-next-line no-plusplus
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.title.indexOf(value) > -1) {
      keyList.push(node.key)
    }
    if (node.children) {
      this.getkeyList(value, node.children, keyList)
    }
  }
  return keyList
},

先革新搜寻办法

再写一个获取所有父节点的办法

getAllParentKey(key, tree) {
  let parentKey
  if (key) {
    parentKey = this.getParentKey(key, tree)
    if (parentKey) {
      if (
        !this.backupsExpandedKeys.some(
          (item) => item === parentKey
        )
      ) {
        this.backupsExpandedKeys.push(parentKey)
      }
      this.getAllParentKey(parentKey, tree)
    }
  }
},

还有个根本的获取以后父节点的办法也写上来

getParentKey(key, tree) {
  let parentKey
  let temp
  // eslint-disable-next-line no-plusplus
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.children) {
      if (node.children.some((item) => item.key === key)) {
        parentKey = node.key
        // eslint-disable-next-line no-cond-assign
      } else if ((temp = this.getParentKey(key, node.children))) {
        parentKey = temp
      }
    }
  }
  return parentKey
},

这样就解决了a-tree的搜寻问题啦

总结来说就是：

官网只获取了以后父节点进行开展，然而当树节点超过2级的时候，对第三级数据进行搜寻就有效了

tips: 官网的这个树组件再查找匹配搜寻内容的时候，把树的所有数据做了扁平化解决再进行循环匹配，如果数据量大的时候不倡议应用，会卡