需求: 渲染一棵树,可以查询。当查询的时候则树的结点全部展开。默认是不展开的


开始我是把default-expand-all赋了一个动态值。默认为FALSE,当点击查询的时候设置为TRUE,重置时为FALSE,但是我发现不行。
解决办法:
<el-tree
v-if="refreshTree"
:default-expand-all="deptExpand"
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="jurisdiction"
@node-click="handleNodeClick"
/>
注意: v-if一定要添加
//在点击查询事件中添加
this.refreshTree = false;
this.deptExpand = true;
this.$nextTick(() => {
this.refreshTree = true;
});
//在重置事件中添加
this.refreshTree = false;
this.deptExpand = false;
this.$nextTick(() => {
this.refreshTree = true;
});
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
一句话: nextTick所指定的回调会在浏览器更新DOM完毕之后再执行。

本文介绍了在Vue.js中如何实现树形组件的动态渲染,并控制节点的展开状态。针对查询和重置操作,通过使用`default-expand-all`属性结合`v-if`指令以及`this.$nextTick()`方法来确保DOM更新后正确设置树的状态。在查询时展开所有节点,重置时关闭所有节点,从而实现了需求。
6710

被折叠的 条评论
为什么被折叠?



