:tree-props="{'default-expand-all':false}" 为什么在搜索时设为true,会慢一拍,在下下次操作时才生效
时间: 2024-03-03 09:48:33 浏览: 64
element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题
5星 · 资源好评率100%
这是因为 `default-expand-all` 属性只在初始化时生效,之后再修改该属性,不会触发 Tree 组件重新渲染。因此,在搜索时将 `default-expand-all` 属性修改为 `true` 并不会立即生效,需要等到下一次 Tree 组件重新渲染时才会生效。
为了解决这个问题,您可以使用 `:expand-on-click-node="false"` 属性来禁用点击节点时展开节点。然后在搜索时,通过代码调用 Tree 组件的 `expandAll` 方法来展开所有节点。这样做的好处是可以避免频繁的 Tree 组件重新渲染,提高搜索的响应速度。具体步骤如下:
1. 在 Tree 组件上添加 `:expand-on-click-node="false"` 属性,禁用点击节点时展开节点:
```html
<el-tree
:data="treeData"
:props="treeProps"
:node-key="nodeKey"
:expand-on-click-node="false"
ref="tree"
></el-tree>
```
2. 在搜索框的 `input` 事件中,获取 Tree 组件的实例,然后调用 `expandAll` 方法展开所有节点:
```javascript
methods: {
handleSearchInput(value) {
// 获取 Tree 组件的实例
const tree = this.$refs.tree
// 展开所有节点
tree.expandAll()
// 其他搜索逻辑...
},
},
```
这样,在搜索时,可以通过调用 `expandAll` 方法快速展开所有节点,避免了频繁的 Tree 组件重新渲染,提高了搜索的响应速度。
阅读全文