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.list
    let 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 = false
        for (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.mfbz.cn/a/770595.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Mac安装nvm,node

新的Mac安装nvm&#xff0c;最简单的是先安装nvm&#xff0c;再安装node&#xff0c;官网示例代码也是这么整的&#xff0c;如果已经安装了node&#xff0c;不要慌 多几步终端操作可以“没有如果”。分两种情况&#xff1a;1&#xff0c;还没安装node&#xff0c;直接装nvm&…

部署redis集群哨兵模式

部署redis集群哨兵模式 前言主要功能工作机制 一、虚拟机部署1、安装2、改配置1、redis.conf2、sentinel.conf3、起服务4、停redis-server服务&#xff0c;验证sentinel 3、脚本1. sentinel notification-script2. sentinel reconfig-script3. sentinel client-reconfig-script…

打造您的第一个私有智能助手

当前的大语言模型通常是基于公开的知识进行训练的&#xff0c;而我们的组织和个人用户希望能够获得有关自身私有知识的回答。为了满足这一需求&#xff0c;业界通常采用检索增强生成&#xff08;RAG&#xff09;或微调模型的方法。然而&#xff0c;这些技术对非专业人员来说门槛…

2065.力扣每日一题7/1 Java(深度优先搜索DFS)

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;算法练习关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 目录 思路 解题方法 时间复杂度 空间复杂度 Code 思路 首先构建一个图…

职业技能大赛引领下物联网专业实训教学的改革研究

随着物联网技术的迅猛发展&#xff0c;作为培养高技能应用型人才的高职院校&#xff0c;面临着将理论与实践深度结合&#xff0c;以满足行业对物联网专业人才新要求的挑战。职业技能大赛作为一种重要的教育评价与促进机制&#xff0c;为物联网专业实训教学的改革提供了新的视角…

AI免费文档处理在线工具:文档总结;论文阅读

1、文档总结 NoteGPT 支持各种类型文档ppt、word、pdf等总结 https://notegpt.io/pdf-summary 另外各种大模型工具一般都支持文档上传总结&#xff1a; 例如kimi、通义等 参考&#xff1a;https://blog.csdn.net/weixin_42357472/article/details/138205261 2、论文阅读 h…

医疗器械进销存软件 专业合规的医疗公司器械出入库管理软件

财务管理&#xff1a;财务档案统一管理&#xff0c;有利于科学管理企业资金 财务管理&#xff1a;发票关联业务单据&#xff0c;业财融合&#xff0c;加速财务数字化转型 财务管理&#xff1a;提供收付款功能&#xff0c;加快企业应收账款的回收&#xff0c;降低付款的资金浮…

深圳比创达EMC|EMI电磁干扰行业:从源头到终端的全面解决方案2

深圳比创达EMC&#xff5c;EMI电磁干扰行业&#xff1a;从源头到终端的全面解决方案 在当今电子信息技术日新月异的时代&#xff0c;电磁干扰&#xff08;EMI&#xff09;问题愈发凸显其重要性。EMI电磁干扰行业作为解决这一问题的关键领域&#xff0c;正面临着前所未有的挑战…

带着味蕾去旅行,在“必吃”餐厅里认识一座城

时代不同了&#xff0c;旅游也变了。十多年前的旅游&#xff0c;是文艺青年的诗与远方&#xff0c;生活在别处的荷尔蒙之旅&#xff0c;宁浩拍了部电影叫《心花怒放》&#xff0c;那些年不管是大理、丽江、拉萨、成都&#xff0c;还是张家界&#xff0c;商家最喜欢用的宣传口号…

前端引用vue/element/echarts资源等引用方法Blob下载HTML

前端引用下载vue/element/echarts资源等引用方法 功能需求 需求是在HTML页面中集成Vue.js、Element Plus&#xff08;Element UI的Vue 3版本&#xff09;、ECharts等前端资源&#xff0c;使用Blob下载HTML。 解决方案概述 直接访问线上CDN地址&#xff1a;简单直接&#xff0c…

Fiddler关于Repaly的细节您了解吗?如何重复执行请求?

最近深入的使用了一下Fiddler的Repaly功能&#xff0c;没想到有这么多的细节&#xff0c;不仅可以设置Repaly的次数&#xff0c;还可以无条件地重发选中的请求&#xff0c;而不考虑之前的请求条件或缓存状态。在这里与各位小伙伴分享一下&#xff0c;希望能够帮到大家&#xff…

使用pdf.js在Vue、React中预览Pdf文件,支持PC端、移动端

&#x1f4dd; 使用背景 在前端开发中&#xff0c;有时候我们需要进行pdf文件的预览操作&#xff0c;通过在网上查询&#xff0c;基本都是一下几种常见的预览pdf文件的方法&#xff1a; 实现方案效果HTML 标签iframe 标签iOS&#xff1a;只能展示第一页&#xff0c;多页不能展…

conda安装cudatoolkit=11.6 (不在default channel的package)

问题描述 众所周知&#xff0c;conda有3个频道 - defaults - pytorch - conda-forge 直接执行 conda install cudatoolkit11.6发现不在当前频道&#xff0c; 添加频道 conda config --add channels conda-forge显示当前频道列表 conda config --show channels从conda-for…

深化产教融合“桥梁”作用!蓝卓携手宁波4大院校共育数智人才

建强“三支队伍”赋能新质生产力&#xff0c;为进一步加强新时代教师队伍建设改革&#xff0c;促进人才培养能力和服务企业能力“双提升”&#xff0c;7月2日&#xff0c;“2024企业实践工业互联网职业教育师资培训班”在蓝卓顺利开班。 来自宁波城市职业技术学院、宁波职业技…

【算法】插入排序

一、算法图示二、算法思想三、代码实现四、算法效率分析4.1 更新运行时长函数4.2 与选择排序对比五、算法改进5.1 结论分析5.2 改进算法图示5.3 算法说明5.4 代码实现5.5 算法效率对比1)算法升级前后对比2)与选择排序对比一、算法图示 二、算法思想 图示以7 1 5 4 1 8 11为例…

桌面记笔记的软件:能加密的笔记app

在日常生活和工作中&#xff0c;很多人都有记笔记的习惯。无论是记录会议要点、学习心得&#xff0c;还是生活中的点滴灵感&#xff0c;笔记都是我们不可或缺的好帮手。然而&#xff0c;传统的纸笔记录方式逐渐不能满足现代人的需求&#xff0c;因为纸质笔记不易保存、查找困难…

idea 内存参数修改不生效问题解决 VM参数设置不生效解决

很多人配置idea 内存参数&#xff0c;怎么配置都不生效&#xff0c;主要原因是配置文件用的不是你修改的那个。 系统环境变量中的这个才是你真正要修改的配置文件。 找到并修改后保存&#xff0c;重启idea就可生效

NodeJS 蔬菜自产零售混合销售平台-计算机毕业设计源码10149

摘 要 随着移动互联网的快速发展&#xff0c;购物方式也发生了巨大的变化。蔬菜作为消费者生活中必不可少的商品之一&#xff0c;在移动互联网时代也迎来了新的购物方式——购物小程序。购物小程序是一种基于手机应用平台的轻量级应用程序&#xff0c;用户可以通过它方便地浏览…

opencv编译报错OpenCV does not recognize MSVC_VERSION “1940“

具体如下: CMake Warning at cmake/OpenCVDetectCXXCompiler.cmake:182 (message):OpenCV does not recognize MSVC_VERSION "1940". Cannot set OpenCV_RUNTIME Call Stack (most recent call first):CMakeLists.txt:174 (include) 打开源码\opencv\sources\cmak…