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…

linux下安装qt、qt触摸屏校准tslib

linux下安装qt 在 Linux 系统下安装 Qt&#xff0c;可以通过以下步骤进行操作&#xff1a;1. 下载 Qt 安装包&#xff1a;首先&#xff0c;你需要从 Qt 官方网站&#xff08;https://www.qt.io/&#xff09;下载适用于 Linux 的 Qt 安装包。选择与你的系统和需求相匹配的版本&…

chrome extension无法获取window对象

背景见上一篇博客修改网页内容的方法 上一篇博客之后&#xff0c;我要修改的网页有一个新改版&#xff0c;然后有个数据存在了window中&#xff0c;我直接在js中使用window.xxx发现无法获取。所以有本文。 https://juejin.cn/post/7145749643316428830 https://onelinerhub.com…

网约车围城:百万司机涌入,狼多肉少

狼多肉少&#xff0c;网约车围城已经成为了一个不争的事实。虽然市场竞争越来越激烈&#xff0c;但机会还是有的&#xff0c;司机们也应该不断提高自身的服务质量和素质&#xff0c;以满足消费者的需求&#xff0c;获取更多的订单和收益。 网约车市场一直以来都是人们生活中不可…

为什么要分库分表?

分析&回答 什么是分库分表&#xff1f; 分库&#xff1a;从单个数据库拆分成多个数据库的过程&#xff0c;将数据散落在多个数据库中。分表&#xff1a;从单张表拆分成多张表的过程&#xff0c;将数据散落在多张表内。 为什么要分库分表&#xff1f; 主要为了提升性能、…

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…

第4章:网络层

文章目录 一、概述和功能2.SDN二、转发1.IP数据报(1)IP数据报的首部字段(2)IP数据报的分片2.IPv4地址:<网络号>,<主机号>3.IP编址 (三个历史阶段)(1)分类IP地址①特殊IP地址②私有IP地址③网络地址转换NAT:导致IP地址变化MAC地址、IP地址变化问题(2)子网划分与子…

go logger 不侵入业务代码 用slog 替换 zap 并实现 callerSkip

快速体验 以下是 项目中 已经用slog替换 zap 后的 logger 使用方法,与替换前使用方式相同,无任何感知 package mainimport "github.com/webws/go-moda/logger"func main() {// 格式化打印 {"time":"2023-09-08T01:25:21.31346308:00","le…

滴滴笔试——算式转移

题目&#xff1a;给出一个仅包含加减乘除四种运算符的算式(不含括号)&#xff0c;如12*3/4&#xff0c;在保持运算符顺序不变的情况下&#xff0c;现在你可以进行若干次如下操作&#xff1a;如果交换相邻的两个数&#xff0c;表达式值不变&#xff0c;那么你就可以交换这两个数…