当前位置: 首页 > 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
}

http://www.lryc.cn/news/395883.html

相关文章:

  • MQTT教程--服务器使用EMQX和客户端使用MQTTX
  • 326. 3 的幂
  • 多标签问题
  • suricata7 rule加载(三)加载options
  • 【电路笔记】-C类放大器
  • c++语法之函数重载
  • EtherCAT主站IGH-- 11 -- IGH之fmmu_config.h/c文件解析
  • 如何使用IDEA快速清理无效代码(荣耀典藏版)
  • ELK优化之Filebeat部署
  • 蝙蝠优化算法(Bat Algorithm,BA)及其Python和MATLAB实现
  • vscode运行java中文乱码,引发的mac配置问题
  • MySQL之备份与恢复(五)
  • 离线运行Llama3:本地部署终极指南_liama2 本地部署
  • 【YOLO8系列】(二)YOLOv8环境配置,手把手嘴对嘴保姆教学
  • MFC常见问题解决
  • 学生管理系统 | python
  • opencv读取视频文件夹内视频的名字_时长_帧率_分辨率写入excel-cnblog
  • js对象的方法速览---数组的静态方法,实例方法和属性合集,各包含一个示例
  • Redis基础教程(十四):Redis连接
  • GraphRAG——一个基于图的检索增强生成的开源项目【送源码】
  • 什么是 VueQuill(前端的富文本编辑器)?
  • 从海上长城到数字防线:视频技术在海域边防现代化中的创新应用
  • 《信息技术与信息化 》是什么级别的期刊?是正规期刊吗?能评职称吗?
  • 【最新版】手把手Claude 3.5 Sonnet 详细步骤注册方法!
  • 代理模式和Java中的动态代理【开发实践】
  • 【Linux】进程间通信——匿名管道
  • React Native与React Native Web:跨平台开发的新选择
  • 【从零开始实现stm32无刷电机FOC】【理论】【3/6 位置、速度、电流控制】
  • 使用MySQLInstaller配置MySQL
  • 命令执行(RCE)面对各种过滤,骚姿势绕过总结