el-table 树状表格查询符合条件的数据

需要对el-table的树状表格根据输入机构名称,筛选出符合条件的数据,可用如下方法:

页面内容如下: 

<el-input v-model="ogeName" placeholder="请输入机构名称"><el-table :data="list" row-key="id" :tree-props="{children:'children',hasChildren:'hasChildren'"><el-table-column label="机构名称" prop="attributes.org_name"></el-table-column>
</el-table>

数据格式如下:

   data() {return {data: [{attributes:[org_name:'1'],hasChildren: true,label: '一级 1',children: [{attributes:[org_name:'1'],hasChildren: true,label: '二级 1-1',children: [{attributes:[org_name:'1'],hasChildren: false,label: '三级 1-1-1'}]}]}],};},

具体筛选方法如下:

// 查询
handleSearch() {let list = this.listlet lastList = this.handleTreeData(list,this.orgName)this.list = lastList
}
// 筛选数据
handleTreeData(treeData,filterValue) {if (!treeData || treeData.length !== 0) {return []}const data = []for (let i = 0; i < treeData.length; i++) {let match = falsefor (const pro in treeDate[i]) {if (pro === 'label') {match |= treeData[i][pro].includes(filterValue)if (match) break}if (this.handleTreeData(treeData[i].children,filterValue).length > 0 || match) {data.push({ ...treeData[i],children: this.handleTreeData(treeData[i].children,filterValue})}return data
}

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

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

相关文章

Git 操作补充:cherry-pick、变基

1. 挑选提交合并 git cherry-pick 对于多分支的代码库&#xff0c;将代码从一个分支转移到另一个分支是一种常见的需求&#xff0c;这可以分成两种情况&#xff1a;一种情况是&#xff0c;你需要另一个分支的所有代码变动&#xff0c;那么就采用 git merge&#xff1b;另一种情…

如何准确测量 Android 应用中 Activity 和 Fragment 的启动时间

如何准确测量 Android 应用中 Activity 和 Fragment 的启动时间 在 Android 应用开发中&#xff0c;了解每个 Activity 和 Fragment 的启动时间对于性能优化至关重要。本文将介绍几种方法来准确测量 Activity 和 Fragment 的启动时间&#xff0c;并提供实际操作步骤&#xff0…

Spark SQL----内置函数JSON Functions

Spark SQL----内置函数JSON Functions JSON Functions 例子&#xff1a; -- from_json SELECT from_json({"a":1, "b":0.8}, a INT, b DOUBLE); --------------------------- |from_json({"a":1, "b":0.8})| -----------------------…

c++之auto

auto auto与for结合begin(),end()说明 auto c11标准引入auto类型说明符必须有初始值通过初始值来推断变量的类型 #include<cstdio> using namespace std; int main(){int v1 10;auto v2 v1;printf("v2%d\n",v2);double v310.5;auto v4 v3;printf("v4…

SF-HCI-SAP问题收集17:值映射布尔型EC数据

Complacency is the enemy of study 学习的敌人是自己的满足。 SAP SuccessFactors Employee Central 到 SAP ERP 的员工主数据复制 successfactor employee center主数据同步&#xff0c;一直以来排错比较难&#xff0c;难的地方是这个提示消息比较隐晦&#xff0c;而且同步的…

数据结构与算法学习(1)

#学习自用# 算法性能分析 时间复杂度O() 时间复杂度就是算法计算的次数。 for(int i0;i<n;i) {ans; } ans; 这串代码时间复杂度为O(n)&#xff0c;实际时间复杂度为O(n1)。如果把i改为i2&#xff0c;时间复杂度仍然为为O(n)&#xff0c;实际时间复杂度变为O(n/2 1)。时…

云原生技术架构详解

云原生技术最全详解(图文全面总结) 容器技术 容器技术&#xff1a;是将应用程序、及其所有依赖项&#xff0c;打包到一个独立的、可移植的容器中。 如下图所示: 容器技术的实现&#xff0c;最典型的就是以Docker为代表的。 如下图所示&#xff1a; 主要解决&#xff1a; 1、…

AI常见名词盘点(持续更新)

目录 知识库 知识库的定义 知识库的分类 AI知识库的特点 小结 Embedding 向量化表示 维度降低 语义关系 小结 提示词工程&#xff08;Prompt Engineering&#xff09; 定义 目的与应用 关键性质 工程化思想 应用示例 小结 RAG 检索增强生成 定义与重要性 RA…

Ubuntu设置nacos开机以单机模式自启动

首先&#xff0c;需要安装jdk Ubuntu 安装JDK 创建Systemd服务单元文件 sudo vim /etc/systemd/system/nacos.service按i进入编辑模式&#xff0c;写入下面信息 [Unit] Descriptionnacos server Afternetwork.target[Service] Typeforking Environment"JAVA_HOME/opt/j…

Java8 - Optional 处理可能为空值的容器类

1. 创建一个 Optional 对象 Optional.of、Optional.ofNullable 、Optional.empty是Optional类的三个静态方法&#xff0c;用于创建Optional对象。 1. Optional.of 方法 Optional.of 方法用于创建一个包含非空值的Optional对象&#xff0c;如果传入的值为null&#xff0c;则会…

Kafka集群安装部署

简介 Kafka是一款分布式的、去中心化的、高吞吐低延迟、订阅模式的消息队列系统。 同RabbitMQ一样&#xff0c;Kafka也是消息队列。不过RabbitMQ多用于后端系统&#xff0c;因其更加专注于消息的延迟和容错。 Kafka多用于大数据体系&#xff0c;因其更加专注于数据的吞吐能力…

用freertos后NVIC里系统时钟部分报错,如何解决?

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…

百日筑基第十天-重温Spring

百日筑基第十天-重温Spring Spring AOP 也就是 Aspect-oriented Programming&#xff0c;译为面向切面编程&#xff0c;是计算机科学中的一个设计思想&#xff0c;旨在通过切面技术为业务主体增加额外的通知&#xff08;Advice&#xff09;&#xff0c;从而对声明为**“切点”…

YOLOv8模型调参---数据增强

目录 1.数据预处理 2.数据增强 2.1 数据增强的作用 2.2 数据增强方式与适用场景 2.2.1离线增强&#xff08;Offline Augmentation&#xff09; 2.2.2 在线增强&#xff08;Online Augmentation&#xff09; 3. 数据增强的具体方法 4. YOLOv8的数据增强 4.1 YOLOv8默认…

Http 实现请求body体和响应body体的双向压缩方案

目录 一、前言 二、方案一(和http header不进行关联) 二、方案二(和http header进行关联) 三、 客户端支持Accept-Encoding压缩方式,服务器就一定会进行压缩吗? 四、参考 一、前言 有时请求和响应的body体比较大,需要进行压缩,以减少传输的带宽。 二、方案一(和…

《信息记录材料》是什么级别的期刊?是正规期刊吗?能评职称吗?

​问题解答 问&#xff1a;《信息记录材料》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的第一批认定学术期刊。 问&#xff1a;《信息记录材料》级别&#xff1f; 答&#xff1a;国家级。主管单位&#xff1a;全国磁性记录材料信息站 主办单位…

Oracle PL / SQL 函数

FUNCTION是返回值的PL / SQL块或方法&#xff0c;因此它可以在赋值的右侧使用。这里是一个例子&#xff1a; n_value : to_number(123.45); 由于FUNCTION返回一个值&#xff0c;因此也可以在SQL语句中使用它&#xff0c;如下例所示&#xff1a; select to_number(1) from dual;…

社区活动|FlowUs知识库的发展|先进技术的落地应用|下一代生产力工具你用了吗

在当今快速发展的数字化时代&#xff0c;技术的进步不断推动着工作方式和知识管理的革新。FlowUs&#xff0c;作为一款前沿的知识管理和协作平台&#xff0c;正站在这一变革的浪潮之巅&#xff0c;引领着智能工作的新潮流。 智能化的智能学习引导工具 FlowUs不仅仅是一个工具&…

Windows系统常用工具及命令和bat文件介绍

常用的windos工具 命令工具名称描述powershellwindows的shell工具eventvwr事件查看器可以查看系统日志taskmgr任务管理器查看已经运行的进程和性能、应用历史记录、开机启动等信息services.msc服务管理可以查看本地的服务regedt注册表编辑器mstsc远程桌面连接devmgmt.msc设备管…

昇思25天学习打卡营第7天|深度学习流程全解析:从模型训练到评估

目录 构建数据集 定义神经网络模型 定义超参、损失函数和优化器 超参 损失函数 优化器 训练与评估 构建数据集 首先从数据集 Dataset加载代码&#xff0c;构建数据集。 代码如下&#xff1a; #引入了必要的库和模块&#xff0c;像 mindspore 以及相关的数据处理模块等等。…