首页 > 其他分享 >实现类似elementui中的树节点过滤效果

实现类似elementui中的树节点过滤效果

时间:2023-09-12 16:37:16浏览次数:36  
标签:node arr elementui 节点 item 过滤 itemValue children

filterTree(tree, arr=[]){   
      let that = this
      if (!tree.length) return [];
      for (let item of tree) {
        let node = {}
        if(item.name.indexOf(this.searchVal) > -1){
          const itemValue =  {...item};
          node = {
            name: itemValue.name || '',
            id: itemValue.id || '',
            count: itemValue.count || 0,
            parentId: item.parentId,
            isOpend: true,    
            children: []
          }
          arr.push(node)
        }
         
        // 如果有子节点,调用递归函数,并把空数组传给下一个函数
        // 利用引用数据类型的特性,实现浅拷贝
        // 递归函数过滤时会改变这个空数组数据,从而实现层级结构过滤
        if (item.children && item.children.length) {
            this.filterTree(item.children, node.children);
        };
        // 当节点的子节点的数据不存在, 可以把它的children删除
        node?.children?.length === 0 && delete node?.children;
      };
      return arr;
    },

 

标签:node,arr,elementui,节点,item,过滤,itemValue,children
From: https://www.cnblogs.com/bm20131123/p/17696543.html

相关文章

  • 3d-force-graph力导向图,如何让具有相同属性的子节点在一起
    前言3d-force-graph是一种基于力导向图的可视化工具,它可以帮助我们更直观地展示数据之间的关系。在使用3d-force-graph时,我们经常会遇到一种情况,即具有相同属性的子节点需要在一起展示,这时我们可以通过一些方法来实现这个目标。方法一:使用颜色区分我们可以通过为具有相同属性的......
  • Kubernetes 集群的优化 节点配额和内核参数调整 自动增加etcd节点 Kube APIServer 配
    一、节点配额和内核参数调整对于公有云上的Kubernetes集群,规模大了之后很容器碰到配额问题,需要提前在云平台上增大配额。这些需要增大的配额包括:虚拟机个数vCPU个数内网IP地址个数公网IP地址个数安全组条数路由表条数持久化存储大小参考gce随着node节点的增加master节点的配......
  • leetcode450删除搜索二叉树的节点
    删除的二叉树节点分4种情况:叶子节点,直接删除就行左节点不为空,右节点为空;直接将左子树返回左节点为空,右节点不为空;直接将右子树返回左节点和右节点不为空;将右子树最小的节点作为根节点,返回右子树TreeNode*deleteNode(TreeNode*root,intkey){if(!root)returnn......
  • 过滤器:禁止浏览器缓存所有动态页面
    禁止浏览器缓存所有动态页面意味着阻止浏览器在访问网站上的动态生成内容时将这些内容存储在本地缓存中。动态页面通常是那些在每次加载时都会根据用户请求或其他因素而生成不同内容的页面,而不是静态页面,其内容在每次访问时都保持不变。禁止浏览器缓存动态页面可以确保用户在访问......
  • rac节点踢除
    解决方案1,删除节点1.1备份OCR在删除节点钱,建议手动备份OCR,OLR(GRID每4个小时也会自动备份OCR),目的是如果出现某些问题,我们可以恢复到删除节点前。$GRID_HOME=/u01/app/11.2.0/grid查看ocr的自动备份信息[root@rac02rac02]#$GRID_HOME/bin/ocrconfig-showbackupPROT-24:Auto......
  • k8s集群在扩容的是某个节点出现 Error querying BIRD: unable to connect to BIRDv4 s
    k8s集群在扩容的是某个节点出现ErrorqueryingBIRD:unabletoconnecttoBIRDv4socket1、问题背景:原因是因为新扩容的机器在扩容之前安装过docker切和当前的版本相差较大:在k8s扩容的时候扩容完发现calico异常,describe查看事件后发现报错如下:发现Kubernetes容器集群中有......
  • java版本剑指offer:在二叉树中找到两个节点的最近公共祖先
    java版本剑指offer:在二叉树中找到两个节点的最近公共祖先描述给定一棵二叉树(保证非空)以及这棵树上的两个节点对应的val值o1和o2,请找到o1和o2的最近公共祖先节点。注:本题保证二叉树中每个节点的val值均不相同。示例1输入:[3,5,1,6,2,0,8,#,#,7,4],5,1返回值:3方法一:递......
  • 有向无环图节点可见性的使用——蕴含图的切割技巧
    1.分析函数所涉及seen[v]使用  传播实例:求解过程演示_10.48.640112774.cn中的一段输出1decisions:25;decisionvar:-22thesizeoftrailis28.:1-6-27-2-22-23-20-13-10-282529147-318-41617-9524......
  • es结果过滤
    ......
  • PDF 的流对象和过滤器学习
    PDF的官方文档(https://opensource.adobe.com/dc-acrobat-sdk-docs/pdflsdk/#pdf-reference),版本为1.5,3.2.7和3.3小节一、流对象(StreamObjects)流对象(StreamObjects)和字符串对象一样,是一个字节(bytes)序列。PDF应用程序可以增量读取流,而字符串须完整读取,此外......