elementui el-tree多层级数据递归根据条件筛选(禁用指定节点)

2023-11-04

项目中用的是elementui的tree组件,要实现的效果是根据关键字去筛选过滤出禁用的节点;

所以首先需要的是对树结构数据进行整合:

export function deepFilter3(nodes, key, query) {

    Array.isArray(nodes) &&

        nodes.forEach((item) => {

            if (item[key].includes(query)) {

                item.disabled = true;

            }

            deepFilter3(item.children, key, query);

        });

    return nodes;

}

其次在树节点中动态添加禁用css:

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

elementui el-tree多层级数据递归根据条件筛选(禁用指定节点) 的相关文章

随机推荐

  • Python3.8 Numpy包 pip指令安装失败、提示超时的解决办法

    每次下东西必折腾半天 这次又遇到了新问题 Python3 8下载Numpy包以及各种包都出错 1 问题描述 在cmd命令提示符窗口调用 pip install package 下载十多分钟后进度条卡住 然后提示超时 尝试添加参数 defau
  • cglib动态代理实现原理详细分析

    在之前Java代理模式中大致的分析了下代理模式的类型及对每种代理类型简单的举例了下 在上篇JDK动态代理实现原理详细分析中 对其JDK代理的流程做了一个详细的分析 而本文 将介绍另一种动态代理模式 cglib动态代理 阅读完本文 你将对cg
  • IDEA 总是提示登录github,登陆后不能push的解决办法

    运行环境 IDEA版本 2020 2 3 Windows 10 git 版本 2 29 2 问题描述 每次push到github时都提示登录 如下图 然而 用命令行push是成功的 此方法适用的前提是能从命令行登录 IDEA的File Se
  • 1. XAML简单的划分区域

    1 运行效果 2 XAML程序
  • QT信号与槽的特点和用法

    1 概念 信号 Signal 就是在特定情况下被发射的事件 例如 PushButton 最常见的信号就是鼠标单 击时发射的 clicked 信号 槽 Slot 就是对信号响应的函数 槽就是一个函数 与一般的 C 函数是一样的 可以定义在类的
  • nested exception is org.apache.ibatis.binding.BindingException

    nested exception is org apache ibatis binding BindingException Parameter roleIdList not found Available parameters are 0
  • Date转换成LocalDateTime类型

    1 先new 一个当前时间 2 获取instant和zoneId 3 将instant和zoneId塞进LocalDateTime ofInstant这个方法里面 4大功告成 我也是今天碰到记录一下 省的以后在找
  • 生信学习——基于R的可视化习题30个(附详细答案解读)

    题目目录 一 基础绘图 1 对RNAseq expr的每一列绘制boxplot图 2 对RNAseq expr的每一列绘制density图 3 对RNAseq expr的每一列绘制条形图 4 对RNAseq expr的每一列取log2后重新
  • Qt串口调试助手

    串口通信因为其协议简单 应用灵活 被广泛使用 Qt自带了串口通信模块QtSerialPort 功能齐全 使用起来非常方便 QtSerialPort模块中有2个类使用的最多 分别是QSerialPort类和QSerialPortInfo类 Q
  • selenium-server-standalone.jar无法启动

    java jar selenium server standalone 2 48 0 jar htmlSuite firefox http localhost 8080 F selenium selenium 2 41 0 login su
  • idea默认文件类型关联

    idea在文件创建的时候没有指定后缀或关联成文本 解决 Editor gt File Types gt Text
  • 【YOLOv8/YOLOv7/YOLOv5/YOLOv4/Faster-rcnn系列算法改进NO.64】即插即用新的注意力机制RFAConv

    前言 作为当前先进的深度学习目标检测算法YOLOv8 已经集合了大量的trick 但是还是有提高和改进的空间 针对具体应用场景下的检测难点 可以不同的改进方法 此后的系列文章 将重点对YOLOv8的如何改进进行详细的介绍 目的是为了给那些搞
  • [译] LLVM IR中间码指令集

    最近在研究这个东西 实在百度不到 最后在谷歌上找到英文手册 英文手册地址 https llvm org docs LangRef html 先说点废话 国内的IT水平离世界顶级水平差距实在有点大 个人感觉 有些因素导致这个结果 1 化身广告
  • 控制工程学习2

    前言 此文为个人学习笔记 所学习的视频链接 1 https www bilibili com video BV1hV411v7KB p 29 share source copy web 2 https www bilibili com vi
  • 快速实现Lora通信(一对多)详解

    TOC 一 Lora介绍 Lora不是一种协议 而是一种基于扩频通信的射频技术 它相对于其他射频技术比如2 4G或普通433 915M来讲 具有更远的传输距离 几千米 和更强的越障性能 所以我们把一个Lora设备作为中心点 多个Lora设备
  • https://www.cnblogs.com/wenwenli/p/8301975.html

    https www cnblogs com wenwenli p 8301975 html 单线程 单进程 非阻塞 事件驱动 句柄就是函数 事件驱动模型 事件源 触发事件 监听事件程序 事件处理程序 路径的要求不严格 node的知识点 1
  • 使用 WSL 在 Windows 上安装 Linux 编程

    使用 WSL 在 Windows 上安装 Linux 编程 近年来 随着开源软件的盛行和跨平台开发的需求不断增长 Windows Subsystem for Linux WSL 成为了一个备受瞩目的工具 WSL 允许我们在 Windows
  • pycharm设置中文,字体颜色修改,设置背景图片(图文讲解)

    目录 1 设置中文 2 设置背景图片 3 字体大小 颜色的修改 这个是我的pycharm编译器的样子 好看吧 pycharm在安装之后默认是英语的 有些小伙伴的英语不太会 看英文会比较吃力 这里我来教大家怎么去设置中文 以及字体颜色大小 背
  • 客户端client 突然断电了,那么服务器如何快速的知道呢

    1 使用定时器 适合有数据流动的情况 2 使用socket选项SO KEEPALIVE 适合没有数据流动的情况 心跳包技术 心跳包之所以叫心跳包是因为 它像心跳一样每隔固定时间发一次 以此来告诉服务器 这个客户端还活着 事实上这是为了保持长
  • elementui el-tree多层级数据递归根据条件筛选(禁用指定节点)

    项目中用的是elementui的tree组件 要实现的效果是根据关键字去筛选过滤出禁用的节点 所以首先需要的是对树结构数据进行整合 export function deepFilter3 nodes key query Array isAr