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