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.hqwc.cn/news/106047.html

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

相关文章

【PAT】攀拓(PAT)- 程序设计(甲级)2023年夏季考试自测

个人学习记录&#xff0c;代码难免不尽人意。 今天又斥资巨款买了PAT甲级2023年夏季的考试真题做了做&#xff0c;得分 95&#xff0c;还买了时光机&#xff0c;在当时排名42名。总的来说还是比较满意的&#xff01;有些地方当时做的时候卡住了但是后面回过头来重新想的时候还是…

Hive 表注释乱码解决

文章目录 出现原因MySQL 字符集修改调整元数据库字符集测试 出现原因 一般 Hive 的元数据信息都存储在 MySQL 中&#xff0c;但 MySQL 数据库中的 character_set_server 和 character_set_database 参数&#xff0c;默认都为 latin1 字符集&#xff0c;这两个参数决定了服务器…

【Spring】aop的底层原理

&#x1f384;欢迎来到边境矢梦的csdn博文&#x1f384; &#x1f384;本文主要梳理 Spring 中的切面编程aop的底层原理和重点注意的地方 &#x1f384; &#x1f308;我是边境矢梦&#xff0c;一个正在为秋招和算法竞赛做准备的学生&#x1f308; &#x1f386;喜欢的朋友可以…

Spring Boot将声明日志步骤抽离出来做一个复用类

上文Spring Boot日志基础使用 设置日志级别中我们写了个比较基本的日志操作 但也随之产生了一个问题 我们这行代码 能不能不写&#xff1f; 具体说 我们不希望每个需要日志的类都声明一个在这 看着太不美观了 我们最简单方法当然是继承 我们找个目录创建一个类 叫 BaseClass…

详解Redis之Lettuce实战

摘要 是 Redis 的一款高级 Java 客户端&#xff0c;已成为 SpringBoot 2.0 版本默认的 redis 客户端。Lettuce 后起之秀&#xff0c;不仅功能丰富&#xff0c;提供了很多新的功能特性&#xff0c;比如异步操作、响应式编程等&#xff0c;还解决了 Jedis 中线程不安全的问题。 …

回溯算法 —— 子集问题

如果说组合问题可以说是思考如何使用回溯算法收割叶子节点的结果、 那么子集问题就是思考如何使用回溯算法收割每一个节点的结果 回溯算法的解题三部曲&#xff1a;1.确定传入的参数 2.确定终止条件 3.确定单层遍历逻辑 ​​​​​​78. 子集 本题就是经典的子集问题了&…

一文讲透机器学习超参数调优!

公众号&#xff1a;尤而小屋作者&#xff1a;Peter编辑&#xff1a;Peter 大家好&#xff0c;我是Peter~ 本文的主题&#xff1a;机器学习建模的超参数调优。开局一张图&#xff1a; 文章很长&#xff0c;建议直接收藏~ 一、什么是机器学习超参数&#xff1f; 机器学习超参数…

基于 Web HID API 的HID透传测试工具(纯前端)

前言 最近在搞HID透传 《STM32 USB使用记录&#xff1a;HID类设备&#xff08;后篇&#xff09;》 。 市面上的各种测试工具都或多或少存在问题&#xff0c;所以就自己写一个工具进行测试。目前来说纯前端方案编写这个工具应该是最方便的&#xff0c;这里放上相关代码。 项目…

动静态库生成使用

&#x1f525;&#x1f525; 欢迎来到小林的博客&#xff01;&#xff01;       &#x1f6f0;️博客主页&#xff1a;✈️林 子       &#x1f6f0;️博客专栏&#xff1a;✈️ Linux       &#x1f6f0;️社区 :✈️ 进步学堂       &#x1f6f0…

星际争霸之小霸王之小蜜蜂(十二)--猫有九条命

系列文章目录 星际争霸之小霸王之小蜜蜂&#xff08;十一&#xff09;--杀杀杀 星际争霸之小霸王之小蜜蜂&#xff08;十&#xff09;--鼠道 星际争霸之小霸王之小蜜蜂&#xff08;九&#xff09;--狂鼠之灾 星际争霸之小霸王之小蜜蜂&#xff08;八&#xff09;--蓝皮鼠和大…

Java:Springboot和React中枚举值(数据字典)的使用

目录 1、开发中的需求2、实现效果3、后端代码4、前端代码5、接口数据6、完整代码7、参考文章 1、开发中的需求 开发和使用过程中&#xff0c;通常会涉及四个角色&#xff1a;数据库管理员、后端开发人员、前端开发人员、浏览者 数据库使用int类型的数值进行存储&#xff08;e…

蓝桥杯打卡Day6

文章目录 N的阶乘基本算术整数查询 一、N的阶乘OI链接 本题思路&#xff1a;本题是关于高精度的模板题。 #pragma GCC optimize(3) #include <bits/stdc.h>constexpr int N1010;std::vector<int> a; std::vector<int> f[N];std::vector<int> mul(in…