官网有这么一个属性,但是我设置变化之后却没有生效,那么应该怎么写呢?
引发这个问题的原因是,这个属性是设置默认的展开折叠,也就是说,树是先渲染的,数据是后来才加载的,渲染时树是空的,所以当数据渲染后,就产生看起来没有生效的效果;
解决方式:改了值之后进行重新渲染,使用this.$nextTick是一个异步回调
html:
<el-tree
v-if="refreshTable"
class="tree-aside"
:data="treeData"
ref="treeRef"
node-key="value"
highlight-current
@node-click="handleClick"
:loading="treeLoading"
:default-expand-all="isExpand"
:expand-on-click-node="false"
>
</tree>
JS:
this.isExpand = true; //是否展开折叠的属性
this.refreshTable = false; //v-if设置这个属性,重新渲染
this.$nextTick(() => {
this.refreshTable = true;
});