在vue2中,实现对一个el-tree组件子节点精确搜索,要求在输入子节点的精确名称后,点击查询按钮button,el-tree会自动展开到搜索的位置
时间: 2023-06-04 19:04:48 浏览: 392
针对你的问题,我可以提供以下的解决方案:
1. 在el-tree的data中增加一个属性用于存储当前节点是否展开的状态,例如:
```
data: [
{
label: 'parent 1',
isExpanded: false,
children: [
{
label: 'child 1',
isExpanded: false
},
{
label: 'child 2',
isExpanded: false
}
]
}
]
```
2. 在查询按钮button的点击事件中,遍历el-tree的所有节点,找到需要展开的节点,并将其父节点逐层展开,例如:
```
onSearchButtonClick() {
const keyword = this.keyword;
this.treeData.forEach(parent => {
parent.children.forEach(child => {
if (child.label === keyword) {
const parentLabel = parent.label;
while (parentLabel) {
const parent = this.tree.getNodeByLabel(parentLabel);
if (!parent.data.isExpanded) {
parent.expand();
}
parentLabel = parent.parent ? parent.parent.data.label : null;
}
child.getNode().scrollIntoView(); // 滚动到对应节点
}
});
});
},
```
3. 在el-tree节点的展开/折叠事件中,更新节点的isExpanded属性,例如:
```
onNodeExpand(node) {
node.data.isExpanded = true;
},
onNodeCollapse(node) {
node.data.isExpanded = false;
},
```
通过以上的解决方案,可以实现对一个el-tree组件子节点精确搜索,并自动展开到搜索的位置。
阅读全文