当前位置: 首页 > news >正文

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
}

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 基于Python进行分类算法实验(人工智能)的设计与实现
  • Selenium 的基本操作你知道哪些?
  • 短视频矩阵系统源代码开发---多种剪辑逻辑再次升级
  • 技术赋能政务服务:VR导视与AI客服在政务大厅的创新应用
  • [终端安全]-5 移动终端之操作系统安全
  • 数据库第三次作业
  • Java中toString()方法的理解使用及如何通过IDEA快速自动调用,重写toString()方法
  • Leetcode—97. 交错字符串【中等】
  • Doris数仓的最佳拍档ETLCloud数据集成平台
  • Git 快速上手
  • 下半年交火点:智驾全国都能开,智舱多模态大模型
  • gen_circle_contour_xld 创建XLD轮廓对应于圆或圆弧。
  • 【机器学习】机器学习与自然语言处理的融合应用与性能优化新探索
  • iOS 应用内存超过多少会收到系统内存警告 ?
  • Linux服务监控自动巡检脚本--推送钉钉告警
  • 【跃迁之路】【669天】程序员高效学习方法论探索系列(实验阶段426-2018.12.13)...
  • axios请求、和返回数据拦截,统一请求报错提示_012
  • gitlab-ci配置详解(一)
  • Java Agent 学习笔记
  • JS+CSS实现数字滚动
  • Js基础——数据类型之Null和Undefined
  • linux安装openssl、swoole等扩展的具体步骤
  • Shadow DOM 内部构造及如何构建独立组件
  • 简单易用的leetcode开发测试工具(npm)
  • 用 vue 组件自定义 v-model, 实现一个 Tab 组件。
  • elasticsearch-head插件安装
  • MPAndroidChart 教程:Y轴 YAxis
  • 大数据全解:定义、价值及挑战
  • #HarmonyOS:软件安装window和mac预览Hello World
  • (2022版)一套教程搞定k8s安装到实战 | RBAC
  • (8)Linux使用C语言读取proc/stat等cpu使用数据
  • (day 2)JavaScript学习笔记(基础之变量、常量和注释)
  • (差分)胡桃爱原石
  • (附源码)php投票系统 毕业设计 121500
  • (附源码)php新闻发布平台 毕业设计 141646
  • (附源码)springboot“微印象”在线打印预约系统 毕业设计 061642
  • (附源码)SSM环卫人员管理平台 计算机毕设36412
  • (附源码)计算机毕业设计高校学生选课系统
  • (免费领源码)python+django+mysql线上兼职平台系统83320-计算机毕业设计项目选题推荐
  • (十)c52学习之旅-定时器实验
  • (贪心 + 双指针) LeetCode 455. 分发饼干
  • (转)Linux整合apache和tomcat构建Web服务器
  • (转载)跟我一起学习VIM - The Life Changing Editor
  • .“空心村”成因分析及解决对策122344
  • .NET 2.0中新增的一些TryGet,TryParse等方法
  • .net core开源商城系统源码,支持可视化布局小程序
  • .NET成年了,然后呢?
  • .NET高级面试指南专题十一【 设计模式介绍,为什么要用设计模式】
  • .NET建议使用的大小写命名原则
  • .net快速开发框架源码分享
  • .NET中分布式服务
  • .sh文件怎么运行_创建优化的Go镜像文件以及踩过的坑
  • ?php echo ?,?php echo Hello world!;?
  • @Documented注解的作用
  • @Transactional 竟也能解决分布式事务?