在新增、删除操作成功之后,我们常常需要重新设置当前选中的节点,el官方给我们提供了方法setCurrentKey,但初次使用这个方法的小白,往往会遇到不起作用的问题。这是因为这个方法要和$nextTick搭配使用,否则数据未挂载,我们的设置并不能生效: this.$nextTick(() => {this.$refs.tree.setCurrentKey(data.id) })...
每次数据改变都销毁、重建一个tree是个不错的办法,但是明显很不合理。 好在tree组件为我们暴露了setCurrentKey方法,但是切记要和$nextTick搭配使用,否则数据未挂载,我们的设置并不能生效: // 数据更新时触发functionupdateTree(){this.$nextTick(()=>{// 手动调用setCurrentKeythis.$refs.tree.setCurrentKey(this...
但问题在于，current-node-key只在tree组件的生命周期中触发一次，数据更新后并不会再次触发。频繁销毁和重建tree组件虽可行，但效率低下。幸运的是，tree组件提供了setCurrentKey方法，但需与$nextTick搭配使用，以确保数据加载后设置生效。总结来说，el-tree组件在懒加载结点更新和数据更新后的current-node...
在el-tree上面挂上data-change<el-tree ref="orgTree" :options="orgTreeOptons" @data-change="handlechange" > </el-tree> 使用nextTick进行设置handlechange() { this.$nextTick(() => { this.$refs.orgTree.$refs.tree.setCurrentKey(this.treeNodeKey); }); }, 默认高亮节点的解决this.$refs....
在el-tree上面挂上data-change<el-tree ref="orgTree" :options="orgTreeOptons" @data-change="handlechange" > </el-tree> 1. 2.使用nextTick进行设置handlechange() { this.$nextTick(() => { this.$refs.orgTree.$refs.tree.setCurrentKey(this.treeNodeKey); }); }, ...
setCurrentKey方法。 1. 了解Element UI Tree组件和setCurrentKey方法 Element UI的Tree组件用于以树形结构展示数据。每个树节点都由一个对象表示,该对象通常包含label、key(唯一标识)、children(子节点数组)等属性。setCurrentKey是Tree组件的一个方法,用于设置当前选中的节点,其参数为要设置为当前节点的key值。
首先我们需要基于这几个组件对我们的组件进行布局,话不多说直接上代码: "select">"options">"tree-option" ref="selectTree" > "select">"options">"tree-option" ref="selectTree" > 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 注:css添加scoped属性,是为了让css只在该组件生效,避免样式污染 ...
1321 - Tree 新增 `iconClass` 与`currentNodeKey` 属性,#13337 #13197 (by @isnifer) 1322 - Progress 的 `status` 添加了 text #13198 (by @ali-master) 1323 - 修复Tree 的 `defaultCheckedKeys` 导致显示的错误,#13349 (by @dive2Pro) 1324 1325 ### 2.4.9 1326 1327 *2018-10-...
el-tree :data="treeData1" ref="treeIn" class="tree" node-key="id" default-expand-all draggable :props="defaultProps" :allow-drag="returnTrue" :render-content="renderTreeNode" @node-drag-start="handleDragstart&...
Tree 的 setCurrentKey 方法支持传入 null,可取消当前高亮的节点,#11205 2.3.8 2018-05-11 修复type 为dates 的 DatePicker 在选择非当前月的日期后,面板会跳转至当前月的问题,#10973 修复可清空的只读 Input 仍会显示清空图标的问题,#10912 修复范围选择的 DatePicker 在未改变值的情况下关闭下拉面板仍会触发...