结合el-input、el-select实现纯前端过滤树形el-table数据

样式图示
在这里插入图片描述

1.搜索实现方法


const searchBtn = async () => {// 获取table列表数据接口const res = await Api.menuList({paging: false})if (res.code === 200) {// 把树形结构转成扁平结构let result = treeToArray(res.data)// 处理搜索框中数据进行table显示项过滤if(commonData.searchParams.menuName || commonData.searchParams.menuCode || commonData.searchParams.status ) {// 过滤后给el-table重新赋值commonData.tableData = result.filter(item => {/*** menuName 搜索框名称数据项* menuCode 搜索框编码数据项* status 搜索框普通用户数据项*/const {menuName, menuCode, status} = commonData.searchParamsconst isMenuName = menuName ?  item.menuName.includes(menuName):trueconst isMenuCode = menuCode?  item.menuCode.includes(menuCode):true// item.status == status 次数判断是因为 status只会出现 1 或者 2const isStatus = status ? item.status == status :truereturn isMenuName && isMenuCode && isStatus})// 调用方法让table树形结构展开unfoldBtn()} else {// 重新加载table数据接口loadData()}}
}

2.过滤后实现效果

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

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

相关文章

分享!JetBrains IDE中的GitLab支持

GitLab是流行的基于git的软件开发和部署平台之一,虽然很长一段时间以来,所有基本git操作都已经可以通过GitLab实现,但GitLab集成仍是JetBrains社区的一大最热门请求。为此,JetBrains团队今年与GitLab联手提供了这种类型的集成。 …

2023年华为杯研究生数学建模竞赛辅导

2023年华为杯研究生数学建模竞赛辅导 各研究生培养单位: 中国研究生数学建模竞赛作为教育部学位管理与研究生教育司指导,中国学位与研究生教育学会、中国科协青少年科技中心主办的“中国研究生创新实践系列大赛”主题赛事之一,是一项面向在校…

使用阿里PAI DSW部署Stable Diffusion WebUI

进入到网址https://pai.console.aliyun.com/里边。 点击创建实例。 把实例名称填写好,选择GPU规格,然后选择实例名称是ecs.gn6v-c8g1.2xlarge。 选择stable-diffusion-webui-env:pytorch1.13-gpu-py310-cu117-ubuntu22.04,然后点击下一步。…

如何利用软文推广进行SEO优化(打造优质软文,提升网站排名)

在当今的互联网时代,SEO优化成为了网站推广的关键。而软文推广作为一种有效的推广方式,其优点不仅仅局限于SEO,还可以带来更多的曝光和用户流量。本文将深入探讨如何做好软文推广,从而提升网站排名和流量。 了解目标受众群体 内容…

springboot集成excel导入导出

1、引入依赖 <dependency><groupId>com.pig4cloud.excel</groupId><artifactId>excel-spring-boot-starter</artifactId><version>1.2.7</version> </dependency> 2、导出 ResponseExcel(name "测试列表") Post…

【学习总结】EasyExcel合并同列不同行,表格数据相同的行

实体类 Data HeadRowHeight(50) ContentStyle(horizontalAlignment HorizontalAlignmentEnum.CENTER, verticalAlignment VerticalAlignmentEnum.CENTER, wrapped BooleanEnum.TRUE) public class CriterionDataExportDTO {ColumnWidth(15)ExcelProperty(value "所属…

点云从入门到精通技术详解100篇-基于补全点云与图像像素级融合的障碍物识别(中)

目录 2.2.2 图像预处理公式章 2 基于隶属云理论点云场景补全 3.1 点云补全方法公 3.2 隶属云理论

Unet语义分割-语义分割与实例分割概述-001

文章目录 前言1、图像分割和图像识别1.语义分割2.实例分割 2、分割任务中的目标函数定义3.IOU 前言 大纲目录 1、图像分割和图像识别 下面是图像识别和图像分割的区别&#xff0c;图像识别就是识别出来&#xff0c;画个框&#xff0c;右边的是图像分割。 1.语义分割 两张图把…

ORB-SLAM2_RGBD_DENSE_MAP编译、问题解决、离线加载TUM数据和在线加载D435i相机数据生成稠密地图

文章目录 0 引言1 安装依赖1.1 其他库安装1.2 pcl库安装 2 编译ORB-SLAM2_RGBD_DENSE_MAP2.1 build.sh2.2 build_ros.sh 3 运行ORB-SLAM2_RGBD_DENSE_MAP3.1 build.sh编译版本3.2 build_ros.sh编译版本 0 引言 ORB-SLAM2_RGBD_DENSE_MAP是基于ORB-SLAM2框架的一种RGB-D稠密地图…

【视频】Python用LSTM长短期记忆神经网络对不稳定降雨量时间序列进行预测分析|数据分享...

全文下载链接&#xff1a;http://tecdat.cn/?p23544 在本文中&#xff0c;长短期记忆网络——通常称为“LSTM”——是一种特殊的RNN递归神经网络&#xff0c;能够学习长期依赖关系&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 本文使用降雨量数据&#xf…

基于FPGA的图像sobel锐化实现,包括tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 将FPGA的仿真结果导入到matlab显示图像效果 2.算法运行软件版本 MATLAB2022a,vivado2019.2 3.部分核心程序 .................................…

如何工作和生活相平衡?

之前待过一家外企&#xff0c;他们的口号是 Balancing work and life&#xff0c;工作和生活相平衡。辗转几家公司之后&#xff0c;发现这个越来越难了&#xff0c;越来越少的时间投入家庭和自己的生活。 人生的意义 &#xff08;AI&#xff09; 人生的意义是一个深奥而复杂的…

EMANE中olsrd的调试

1 调试目的 本着学习的态度&#xff0c;对emane tutorial中的示例程序进行重现&#xff0c;以加深对EMANE的理解和掌握。在示例程序0(见https://github.com/adjacentlink/emane-tutorial/wiki/Demonstration-0)中介绍了使用olsrlinkview.py脚本来通过可视化界面观察olsr节点的链…

CentOS LVM缩容与扩容步骤

为VM打快照;备份home数据;# yum install xfsdump -y [root@testCentos7 home]# xfsdump -f /dev/home.dump /home xfsdump: using file dump (drive_simple) strategy xfsdump: version 3.1.7 (dump format 3.0) - type ^C for status and control ===================…

基于Python的UG二次开发入门

文章目录 基于Python的UG二次开发入门1 二次开发环境搭建1.1 安装UG1.2 安装Pycharm1.3 环境配置1.4 测试 2 NX Open介绍2.1 基础架构2.1.1 Sessions and Parts2.1.2 Objects and Tags2.1.3 Factory Objects&#xff08;工厂对象&#xff09;2.1.4 Builder Objects&#xff08;…

9.14号作业

仿照vector手动实现自己的myVector&#xff0c;最主要实现二倍扩容功能 有些功能&#xff0c;不会 #include <iostream>using namespace std; //创建vector类 class Vector { private:int *data;int size;int capacity; public://无参构造Vector(){}//拷贝构造Vector(c…

【绝㊙️】三年开发内功心得

经典嵌套if-else问题 这个也是老生常谈问题了&#xff0c;不管哪里都能看到。 那如何解决 方法一&#xff08;重要&#xff09;&#xff1a; 如果逻辑分支过多&#xff0c; 即使你不解决嵌套if-slse&#xff0c;至少也要把每个 if的{}里的逻辑抽到一个独立的方法或者工具类…

【SLAM】IMU预积分的理解、手把手推导(2/4)

本章开始将会开始对IMU预积分进行详细的推导。本次的推导采用李群李代数的形式来表示旋转&#xff0c;对应的是ORB-SLAM3的方案。比如VINS&#xff0c;采用的四元数方案&#xff0c;可能从推导过程上看有一些不同。 IMU预积分推导 先说一下李群李代数的定义吧&#xff1a; R ˙…

无线通信网络

一、无线局域网 WLAN概念 WLAN(Wireless Local Area Network)无线局域网,目前大部分无线产品都是根据IEEE802.11标准开发。 IEEE802.11标准 名称发布时间工作频段调制技术数据速率802.111997年2.4GHz ISM频段DB/SK、DQPSK1Mbps、2Mbps802.11b1998年2.4GHz ISM频段CCK5.5Mbps…

微信小程序的疫苗接种预约设计与实现vue+uniapp

对于本小程序的疫苗预约的设计来说&#xff0c;系统开发主要是采用java语言&#xff0c;在整个系统的设计中应用MySql数据库来完成数据存储&#xff0c;具体根据疫苗预约信息的现状来进行开发的&#xff0c;具体根据现实的需求来实现疫苗预约网络化的管理&#xff0c;各类信息有…