最近根据需求,会做一个懒加载的组织树,可以编辑组织树。但编辑成功后,无法实时更新。一开始想了很多方案,也参考了网上很多方案,但是都有各种不足。然后查看了ElementUi的tree组件的源码。Node.prototype.loadData=functionloadData(callback){var_this5=this;vardefaultProps=arguments.length>1&&arguments[1]!==未定义?参数[1]:{};if(this.store.lazy===true&&this.store.load&&!this.loaded&&(!this.loading||Object.keys(defaultProps).length)){this.loading=true;varresolve=functionresolve(children){_this5.loaded=true;_this5.loading=false;_this5.childNodes=[];_this5.doCreateChildren(children,defaultProps);_this5.updateLeafState();如果(回调){callback.call(_this5,孩子们);}};this.store.load(this,resolve);}else{if(回调){callback.call(this);}}};ps:以上代码来自node_modules/element-ui/lib/tree.jsthis明显是当前节点,看if语句的条件中的this.loaded是不是当前节点已经加载。在resolve中将this.loaded设置为true;所以只需将当前节点的父节点的loaded属性设置为false即可。这样当再次点击该节点时,会继续请求懒加载方法。//节点更新成功后的操作orgSuccess(){//如果是新的子节点,则刷新当前节点,如果是更新当前节点,则刷新父节点letnode=this.isNew?this.rightNode:this.rightNode。父母;节点.loaded=false;node.isLeaf=false;this.$set(node,'expanded',false);这个.fetchData();},PS1:这里为了更人性化的交互,我会使用isLeaf,并且expanded属性也设置为false。PS2:不能单独通过修改属性来触发视图更新。这里我使用vue.set()方法来触发视图更新。vue.set()的用法可以参考官方文档:https://cn.vuejs.org/v2/api/#...新人,有不足或错误的地方还望指正!
