element树形筛选

<el-inputv-model="projectName"placeholder="请输入名称"clearablemaxlength="10"@clear="clearTree"
/>
<el-divider />
<el-treeref="tree"class="filter-tree":data="treeList":props="defaultProps"default-expand-allnode-key="id":highlight-current="highlightCurrent":filter-node-method="filterNode"@node-click="handleNodeClick"
><div slot-scope="{ node, data }" class="custom-tree-node" :title="node.label"><span>{{ node.label }}</span><div class="button-group" @click.stop="() => {}"><el-link size="mini" type="primary" icon="el-icon-circle-plus-outline" @click.stop="onAddType(data)" /><el-link size="mini" type="primary" icon="el-icon-delete" @click.stop="onDelType(data)" /></div></div>
</el-tree>
projectName: '',
treeList: [],
defaultProps: {children: 'children',label: 'name'
},watch: {projectName: {handler(v) {// 监听输入框变化、进行实时过滤this.$refs.tree.filter(v)}}},methods: {// 过滤掉无用的数据filterNode(value, data, node) {if (!value.trim()) return trueif (data.name.toLowerCase().indexOf(value.toLowerCase().trim()) !== -1) { return true }return this.checkNodes(value, data, node)},// 筛选父级所需要的子级checkNodes(value, data, node) {const level = node.levelif (level === 1) return falselet parentData = node.parentlet index = 0while (index < level - 1) {if (parentData.data.name.toLowerCase().indexOf(value.toLowerCase().trim()) !== -1) return trueparentData = parentData.parentindex++}return false},// 清空项目树搜索框clearTree() {this.getOrganizarionTree()},
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/72021.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux】高级IO --- Reactor网络IO设计模式

人其实很难抵制诱惑&#xff0c;人只能远离诱惑&#xff0c;所以千万不要高看自己的定力。 文章目录 一、LT和ET模式1.理解LT和ET的工作原理2.通过代码来观察LT和ET工作模式的不同3.ET模式高效的原因&#xff08;fd必须是非阻塞的&#xff09;4.LT和ET模式使用时的读取方式 二…

时序预测 | MATLAB实现CNN-LSTM卷积长短期记忆神经网络时间序列预测(风电功率预测)

时序预测 | MATLAB实现CNN-LSTM卷积长短期记忆神经网络时间序列预测&#xff08;风电功率预测&#xff09; 目录 时序预测 | MATLAB实现CNN-LSTM卷积长短期记忆神经网络时间序列预测&#xff08;风电功率预测&#xff09;预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1…

软路由的负载均衡设置:优化网络性能和带宽利用率

在现代网络环境中&#xff0c;提升网络性能和最大化带宽利用率至关重要。通过合理配置软路由IP的负载均衡设置&#xff0c;可以有效地实现这一目标&#xff0c;并提高整体稳定性与效果。本文将详细介绍如何进行软路由IP的负载均衡设置&#xff0c;从而优化网络表现、增加带宽利…

数据结构——二叉树线索化遍历(前中后序遍历)

二叉树线索化 线索化概念&#xff1a; 为什么要转换为线索化 二叉树线索化是一种将普通二叉树转换为具有特殊线索&#xff08;指向前驱和后继节点&#xff09;的二叉树的过程。这种线索化的目的是为了提高对二叉树的遍历效率&#xff0c;特别是在不使用递归或栈的情况下进行遍历…

Docker部署(5)——使用docker run命令部署运行jar项目

对于一些简单的单体项目&#xff0c;可以使用 docker run 命令可以直接在命令行中运行容器&#xff0c;无需事先构建镜像。这相较于之前使用的 dockerfile 文件来运行部署项目相当于是另外一种简单的部署方法&#xff0c;关于之前使用dockerfile 文件来运行部署这种方法&#x…

l8-d8 TCP并发实现

一、TCP多进程并发 1.地址快速重用 先退出服务端&#xff0c;后退出客户端&#xff0c;则服务端会出现以下错误&#xff1a; 地址仍在使用中 解决方法&#xff1a; /*地址快速重用*/ int flag1,len sizeof (int); if ( setsockopt(fd, SOL_SOCKET, SO_REUSEADDR, &a…

B-Tree 索引和 Hash 索引的对比

分析&回答 B-Tree 索引的特点 B-tree 索引可以用于使用 , >, >, <, < 或者 BETWEEN 运算符的列比较。如果 LIKE 的参数是一个没有以通配符起始的常量字符串的话也可以使用这种索引。 有时&#xff0c;即使有索引可以使用&#xff0c;MySQL 也不使用任何索引。…

【漏洞复现】E-office文件包含漏洞

漏洞描述 Weaver E-Office是中国泛微科技(Weaver)公司的一个协同办公系统。泛微 E-Office 是一款标准化的协同 OA 办公软件,实行通用化产品设计,充分贴合企业管理需求,本着简洁易用、高效智能的原则,为企业快速打造移动化、无纸化、数字化的办公平台。 该漏洞是由于存在…

巨人互动|游戏出海游戏出海效果怎样?

游戏出海是指将原本面向国内市场的游戏产品进行调整和优化&#xff0c;以适应海外市场的需求&#xff0c;并进行推广和销售。下面小编讲讲关于游戏出海对于游戏效果的影响的一些讨论点。 1、市场扩大 通过游戏出海&#xff0c;可以将游戏产品的目标受众从国内扩展到全球范围内…

Zebec Protocol 成非洲利比亚展会合作伙伴,并将向第三世界国家布局

在 9 月 6 日&#xff0c;The Digital Asset Summit ’23&#xff08;利比亚大会&#xff09;在尼日利亚首度阿布贾的 NAF 会议中心举办&#xff0c;该会议对 Web3 领域在非洲地区的发展进行了探索&#xff0c;旨在推动非洲地区区块链产业的进一步发展&#xff0c;据悉该会议室…

CSS 设置渐变背景 CSS 设置渐变边框

一、css渐变背景添加透明度opacity css渐变背景经常会在项目开发中遇到&#xff0c;此时UI如果给出的是单一的渐变背景&#xff08;没有背景透明度&#xff09;&#xff0c;这个我们会很快的写出代码&#xff0c;如下: <div class"btn">这是一个按钮</div&…

神策数据发布汽车行业 CJO 解决方案,打造客户旅程全新体验

最近&#xff0c;围绕数字化客户经营&#xff0c;神策数据基于“客户旅程编排&#xff08;Customer Journey Orchestration&#xff0c;简称 CJO&#xff09;”理念&#xff0c;发布汽车行业全新解决方案&#xff0c;通过全渠道打通给客户带来一致的、个性化的体验&#xff0c;…

【HTML专栏1】语法规范、基础结构标签

本文属于HTML/CSS专栏文章&#xff0c;适合WEB前端开发入门学习&#xff0c;详细介绍HTML/CSS如果使用&#xff0c;如果对你有所帮助请一键三连支持&#xff0c;对博主系列文章感兴趣点击下方专栏了解详细。 博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;HTML/CS…

无涯教程-JavaScript - DEC2HEX函数

描述 DEC2HEX函数将十进制数转换为十六进制。 语法 DEC2HEX (number, [places])争论 Argument描述Required/Optionalnumber 要转换的十进制整数。 如果number为负数,则将忽略位数,并且DEC2HEX返回10个字符(40位)的十六进制数字,其中最高有效位是符号位。其余的39位是幅度位…

Laravel 模型的关联写入多对多的关联写入 ⑩③

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; THINK PHP &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &#x1f44…

读高性能MySQL(第4版)笔记04_操作系统和硬件优化

1. 从软件本身和它运行的典型工作负载来看&#xff0c;MySQL通常也更适合运行在廉价硬件上 2. 基本资源 2.1. CPU 2.2. 内存 2.3. 磁盘 2.4. 瓶颈 2.5. 网络资源 3. CPU 3.1. 最常见的瓶颈是CPU耗尽 3.2. 检查CPU使用率来确定工作负载是否受CPU限制 3.3. 低延迟&…

Python基础篇(17):模块与包

一、as 关键字的使用 1、as 关键字的作用&#xff1a;给导入的模块取别名 import 测试1 as Test_1 import 测试2 as Test_2Test_1.say_hello() Test_2.say_hello() 二、if __name__ __main__ 1、作用 测试当前模块所编写的代码块&#xff0c;根据业务自主选择需要运行的代…

2023 年高教社杯全国大学生数学建模竞赛题目 A 题 定日镜场的优化设计

A 题 定日镜场的优化设计 构建以新能源为主体的新型电力系统&#xff0c;是我国实现“碳达峰”“碳中和”目标的一项重要措施。塔式太阳能光热发电是一种低碳环保的新型清洁能源技术[1]。 定日镜是塔式太阳能光热发电站&#xff08;以下简称塔式电站&#xff09;收集太阳能的基…

网络编程套接字 | UDP套接字

前面的文章中我们叙述了网络编程套接字的一些预备知识点&#xff0c;从本文开始我们就将开始UDP套接字的编写。本文中的服务端与客户端都是在阿里云的云服务器进行编写与测试的。 udp_v1 在v1的版本中我们先来使用一下前面讲过得一些接口&#xff0c;简单的构建一个udp服务器…

OceanBase 4.1解读:读写兼备的DBLink让数据共享“零距离”

梁长青&#xff0c;OceanBase 高级研发工程师&#xff0c;从事 SQL 执行引擎相关工作&#xff0c;目前主要负责 DBLink、单机引擎优化等方面工作。 沈大川&#xff0c;OceanBase 高级研发工程师&#xff0c;从事 SQL 执行引擎相关工作&#xff0c;曾参与 TPC-H 项目攻坚&#x…