最近在使用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: 官方的这个树组件再查找匹配搜索内容的时候,把树的所有数据做了扁平化处理再进行循环匹配,如果数据量大的时候不建议使用,会卡
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。