eltree组件,当搜索为空,或者搜索条件清空时,折叠所有节点
时间: 2024-03-17 19:47:37 浏览: 69
jQuery删除/清空指定元素的所有子节点实例代码
可以在 elt-tree 的搜索框 v-model 绑定一个变量,当这个变量为空时,通过 $refs 获取到 elt-tree 组件的实例,然后调用它的 collapseAll() 方法来折叠所有节点。
示例代码如下:
```html
<template>
<div>
<input v-model="searchKey" @input="handleSearch" placeholder="请输入搜索关键词" />
<elt-tree :data="data" ref="tree"></elt-tree>
</div>
</template>
<script>
export default {
data() {
return {
searchKey: '',
data: [
{
label: '节点1',
children: [
{ label: '子节点1' },
{ label: '子节点2' },
],
},
{
label: '节点2',
children: [
{ label: '子节点3' },
{ label: '子节点4' },
],
},
],
};
},
methods: {
handleSearch() {
if (!this.searchKey) {
const tree = this.$refs.tree;
tree.collapseAll();
}
},
},
};
</script>
```
当搜索框的值为空时,调用 handleSearch() 方法,获取到 elt-tree 组件的实例并调用 collapseAll() 方法即可。
阅读全文