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