皮皮网

1.详解如何实现Element树形控件Tree在懒加载模式下的码讲动态更新
2.element-ui tree获取子节点全选的父节点信息
3.element-ui的tree和select结合使用问题？

详解如何实现Element树形控件Tree在懒加载模式下的动态更新

        Element提供的Tree树形控件，可以用清晰的码讲层级结构展示信息，还可以展开或折叠。码讲Tree支持两种加载模式：一次性加载全部树节点和懒加载模式。码讲所谓懒加载模式，码讲是码讲网站源码挖掘指当需要展开父节点时才渲染子节点。懒加载模式的码讲应用场景适合树节点数据量大的情形，在一定程度上可以优化图形用户界面的码讲响应效率以及提升用户体验。但是码讲，懒加载模式对数据动态刷新应用需求的码讲支持不尽如意。树形控件节点一旦展开就缓存在本地，码讲后续不会再继续更新和刷新节点数据。码讲本文将介绍如何实现Element树形控件Tree在懒加载模式下的码讲动态更新。具体需求如下图所示：

       动态更新需求

       当Select选择器选择箱变、码讲逆变器、码讲岳阳楼小程序源码汇流箱或组串等类型时，Tree树形控件会动态刷新显示相应类型的设备名称。我们知道在懒加载模式下，Tree树形控件节点一旦展开，就不再重新加载节点数据。那么如何实现在选择不同类型时动态刷新树形控件节点数据显示呢？一种实现思路是在Select选择器发生变化时，在change事件中清空Tree树形控件的全部子节点，然后再重新加载树形控件节点数据。关键代码如下图所示：

       清空树形控件节点

       首先，通过树形控件的父节点清空所有子节点数据，然后调用loadNode1方法重新构建树形控件懒加载数据。loadNode1是树形控件load属性指定的加载树的方法，该方法在加载树或者展开某个节点时会被自动调用。

       我们可以看到，金山字母下落打字游戏源码传递给loadNode1方法有两个参数，this.node和this.resolve，这两个参数都是树形控件顶层节点属性数值。那么，是如何获取到这两个参数数值的呢？具体方法是：首先，申明node和reslove两个变量用于保存顶层节点的node和reslove数值。然后，在树形控件加载时将node.level===0情况下的node和reslove数值保存。如下图所示：

       获取顶层节点

       loadNode1内部是通过reslove方法，将数据逐级推至树形控件数据结构中的。先执行reslove方法的数据是父节点，后执行reslove方法的数据是子节点，在无子节点的情况下通过调用reslove([])实现。

       结束语：至此，短线抓龙头股源码实现了Element的Tree树形控件懒加载模式下的节点数据动态更新。在子节点数据量大的情况下，懒加载和动态更新机制，在一定程度上解决了响应效率问题，也提升了用户体验。

       补充:element ui 懒加载树节点内子项的动态更新

       <el-tree

        :props="props1"

        :load="loadNode1"

        lazy

        show-checkbox>

       </el-tree>

       <script>

        export default {

        data() {

        return {

        props1: {

        label: 'name',

        children: 'zones',

        isLeaf: 'leaf'

        },

        };

        },

        methods: {

        loadNode1(node, resolve) {

        if (node.level === 0) {

        return resolve([{ name: 'region' }]);

        }

        if (node.level > 1) return resolve([]);

        setTimeout(() => {

        const data = [{

        name: 'leaf',

        leaf: true

        }, {

        name: 'zone'

        }];

        resolve(data);

        }, );

        }

        }

        };

       </script>

       上面代码是element ui官方树懒加载的实例。实现就是添加lazy，绑定一个load属性，点击节点的时候，就会触发loadNode1的方法，将数据刷到点击的节点里面。

       这里的问题是：如果该节点load过数据，再次点击是不会触发loadNode1这个方法的，但是鸿蒙多设备任务中心源码这个节点下的子节点也许会动态增加或者删除

       解决的思路是：

       1、得到选中的节点

       2、将选中节点的子节点全部删除

       3、将选中节点的子节点数据手动刷到该节点内

       我查过element ui源码，这里用到源码内的方法，所以我们实现下来很方便，只要三行代码

       function refreshLazyTree(node, children) {

        var theChildren = node.childNodes

        theChildren.splice(0, theChildren.length)

        node.doCreateChildren(children)

       }

       1、node就是选中的的节点（也就是点击展开的节点），你可以通过element ui里的getNode方法获得，也可以直接监听@node-click事件直接获取选中的节点。

       2、children就是node这个节点的子项

       3、通过splice方法删除node节点下的所有子项

       4、调用doCreateChildren创建子项就ok了

element-ui tree获取子节点全选的父节点信息

       在公司服务升级后，部门架构发生变化，需要处理部门全选与未全选情况的API请求参数。当二级部门下所有三级部门被选中时，仅需传入二级部门ID，操作符为like；若某个部门被选中但其父级部门未被选中，则需传入该具体子部门ID，操作符为in。

       若所选部门包含一个或多个父级部门（isParent属性为true），则需保留该父级部门，并移除其子部门。操作符为like。

       反之，若所选部门中无任何父级部门（isParent为true），则需传入所有已选部门的ID，操作符为in。

       查找合适的解决方案时，我翻阅了大量elementUI tree文档，但未找到有效答案。后来，我借鉴一个方法，但对性能影响较大。为了优化，我提出以下思路。

       获取所有已选部门数据（包含所有层级），利用父部门标识isParent === true特性，筛选并剔除父级部门。树绑定的treePos具有层级规律，根据当前树层级进行处理。

       解决方案一：采用循环遍历树结构，定位到上一级或最后一级已选数据。

       解决方案二：通过获取所有已选节点，筛选出父级部门，并保留，其余部门则通过操作符in进行请求参数传输。

element-ui的tree和select结合使用问题？

       在构建Element UI的表单组件时，遇到一个权限管理需求，需要实现树状结构的勾选组件，并以下拉菜单形式展示。

       起初尝试了在线搜索方法，发现可以通过选项绑定实现动态更新，点击树节点调整值与标签，确认按钮关闭下拉框。然而，发现确认按钮位于界面底部，操作不便，决定优化此组件。

       经过一番探索与思考，利用tree组件的slot特性，直接在插槽内编写选项，结合Element UI核心功能，成功实现了treeSelect的自定义实现。

       实现关键点包括：

       1. `expand-on-click-node` 属性，控制点击节点时是否自动展开或收缩，默认为真。

       2. `check-on-click-node` 属性，决定点击节点时是否选中节点， 默认为假，需点击复选框进行选中。

       最终展示效果如图所示，不仅解决了操作不便的问题，还实现了所需功能。

       总结：在封装动态表单组件时，利用Element UI的tree组件与内核功能，实现了自定义的树状权限勾选组件，满足了下拉菜单的展示需求。此组件适用于权限管理等场景，尤其在动态表单构建中展现出高效与灵活性。