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

news/2024/10/6 17:37:08/

需要对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>

数据格式如下:

javascript">   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'}]}]}],};},

具体筛选方法如下:

javascript">// 查询
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.ppmy.cn/news/1474008.html

相关文章

Redis IO多路复用

0、前言 本文所有代码可见 > 【gitee code demo】 本文涉及的主题&#xff1a; 1、BIO、NIO的业务实践和缺陷 2、Redis IO多路复用&#xff1a;redis快的主要原因 3、epoll 架构 部分图片 via 【epoll 原理分析】 1、BIO单线程版 1.1 业务代码 client client代码相同…

数据库——数据库性能优化

title: 数据库——数据库性能优化 date: 2024-07-06 12:26:21 tags: 数据库 categories: 数据库 cover: /image/T1.jpg description: 数据库——MySQL的性能优化 数据库优化 系统的吞吐量瓶颈往往出现在数据库的 访问速度 上&#xff0c;随着应用程序的运行&#xff0c;数据库…

上海外贸建站公司wordpress模板推荐

Sora索啦高端制造业wordpress主题 红色高端制造业wordpress主题&#xff0c;适合外贸企业出海建独立站的wordpress模板。 https://www.jianzhanpress.com/?p5885 Yamal外贸独立站wordpress主题 绿色的亚马尔Yamal外贸独立站wordpress模板&#xff0c;适用于外贸公司建独立站…

(九)绘制彩色三角形

前面的学习中并未涉及到颜色&#xff0c;现在打算写一个例子&#xff0c;在顶点着色器和片元着色器中加入颜色&#xff0c;绘制有颜色的三角形。 #include <glad/glad.h>//glad必须在glfw头文件之前包含 #include <GLFW/glfw3.h> #include <iostream>void …

Spring框架Mvc(2)

1.传递数组 代码示例 结果 2.集合参数存储并进行存储类似集合类 代码示例 postman进行测试 &#xff0c;测试结果 3.用Json来对其进行数据的传递 &#xff08;1&#xff09;Json是一个经常使用的用来表示对象的字符串 &#xff08;2&#xff09;Json字符串在字符串和对象…

计算机专业怎么选择电脑

现在高考录取结果基本已经全部出来了&#xff0c;很多同学都如愿以偿的进入到了计算机类专业&#xff0c;现在大部分同学都在为自己的大学生活做准备了&#xff0c;其中第一件事就是买电脑&#xff0c;那计算机类专业该怎么选择电脑呢&#xff1f; 计算机专业是个一类学科&…

麒麟信安与湖南第一师范学院签署校企合作协议,共启产教融合新篇章

7月5日&#xff0c;麒麟信安、湖南欧拉生态创新中心与湖南第一师范学院校企合作协议签约仪式在长沙麒麟科技园举行。湖南第一师范学院校党委委员、副校长周发明&#xff0c;与麒麟信安副总裁王攀签署校企合作协议&#xff0c;并共同为“国产操作系统产学研基地”揭牌。计算机学…

6、Redis系统-数据结构-07-QuickList

七、快速列表&#xff08;QuickList&#xff09; 快速列表&#xff08;QuickList&#xff09;是 Redis 中用于实现列表&#xff08;List&#xff09;类型的一种高效数据结构。它结合了双向链表和压缩列表的优点&#xff0c;既支持高效的顺序访问&#xff0c;又能有效节省内存。…