vue + elementui 中 在弹框中使用了 tree型结构(<el-tree></el-tree>),点击关闭按钮按钮重置tree

vue 项目中使用了element-ui 中 tree,选择了懒加载的模式
通过点击按钮,使得 tree 重新加载

<div class="head-container header-tree" v-if="addDialogVisible">
	<el-tree
	  ref="tree"
	   :data="treeData"
	   :load="loadnode"
	   :lazy="isLazy"
	   check-on-click-node
	   check-strictly
	   :props="defaultProps"
	   highlight-current
	   accordion
	   node-key="nodeId"
	   @node-expand="keepExpandedNode"
	   @check-change="hChangeTree" 
	   @check="handleCheckChange"
	   :default-expanded-keys="defaultExpandedNodes"
	   :default-checked-keys="defaultCheckedNodes"
	 ></el-tree>
</div>

通过点击重置按钮,使得tree 重新加载

/** 重置按钮操作 */
resetQuery() {
    var that = this;
    // 重载 tree
    that.addDialogVisible = false;
    
    setTimeout(function(){
      that.addDialogVisible = true;
    },200)
}

解决的思路为:通过v-if 的显示隐藏来控制重新加载

你可能感兴趣的:(vue.js,elementui,前端)