elment-ui的折叠tree表单实现纯前端搜索,展开收起功能

好久没更新博客了~
记录一下本次做的一个很扯的需求
在这里插入图片描述
纯前端去实现这个查询的功能,后台返回的是个数组对象,前端要给他包装成树结构先展示
之后参考代码路径src\views\goods\category\index.vue
需求描述:
搜索输入任何一个关键字,都会展开他的父级,两个栏目都包含了,那么两个父级都展开
先模拟数据,上代码:

categoryList=[{categoryName:'测试1',children:[{categoryName:'haha1',children:[]},]},{categoryName:'测试2',children:[{categoryName:'haha2',children:[]},]},{categoryName:'钦佩',children:[{categoryName:'haha2',children:[]},]}
]
<el-tablev-loading="loading":data="categoryList"row-key="categoryId"stripe:tree-props="{ children: 'children', hasChildren: 'hasChildren' }":expand-row-keys="expandedCategoryIds"><el-table-column label="分类名称" prop="categoryName" /><el-table-column label="分类等级" prop="level" /><el-table-column label="状态" prop="status" :formatter="statusFormat" /><el-table-column label="关键字" prop="keywords" /><el-table-column label="排序" prop="sortNum" /><el-table-column label="创建时间" prop="createTime" width="180" /><el-table-column label="操作" min-width="120"></el-table-column></el-table>

根据categoryName进行前端模糊搜索,会递归categoryList 里面所有的值,包括children,children的不固定多少级,
比如我所有一个haha,不管是哪一级,都会把,包含这个haha的都展开,别的项目也不会隐藏

<el-input
v-model=“searchText”
placeholder=“请输入搜索关键词”
class=“inpClass”
clearable
@keydown.enter.native=“onSearchChange”

  data() {return {searchText: "",}}
    // 处理搜索onSearchChange() {const expandIds = new Set();// 递归搜索函数const searchInCategory = (categories, parentIds = []) => {if (!categories) return false;let hasMatch = false;for (const category of categories) {const currentIds = [...parentIds, category.categoryId];// 检查当前项是否匹配const isMatch = category.categoryName.toLowerCase().includes(this.searchText.toLowerCase());// 递归检查子项const hasChildMatch = searchInCategory(category.children, currentIds);// 如果当前项或子项匹配,添加所有父级ID到展开集合if (isMatch || hasChildMatch) {currentIds.forEach((id) => expandIds.add(id));hasMatch = true;}}return hasMatch;};if (this.searchText) {searchInCategory(this.categoryList);this.expandedCategoryIds = Array.from(expandIds).map(String);} else {// 确保设置一个新的空数组this.expandedCategoryIds = [];// 2. 确保在DOM更新后执行收起操作this.$nextTick(() => {// 3. 遍历所有数据强制收起const closeRows = (data) => {data.forEach((row) => {if (this.$refs.tableRef) {this.$refs.tableRef.toggleRowExpansion(row, false);}if (row.children && row.children.length) {closeRows(row.children);}});};closeRows(this.categoryList);});}},

在获取列表数据的时候也进行初始化数据

    /** 查询商品分类列表 */getList() {this.loading = true;listCategory(this.queryParams).then((response) => {if (response.data) {this.categoryList = this.handleTree(response.data, "categoryId");this.expandedCategoryIds = [];// 2. 确保在DOM更新后执行收起操作this.$nextTick(() => {// 3. 遍历所有数据强制收起const closeRows = (data) => {data.forEach((row) => {if (this.$refs.tableRef) {this.$refs.tableRef.toggleRowExpansion(row, false);}if (row.children && row.children.length) {closeRows(row.children);}});};closeRows(this.categoryList);});}this.loading = false;});},

这样就实现纯前端去模拟搜索的效果

注意,后来又遇到一个问题:

<el-tablev-loading="loading":data="categoryList"row-key="categoryId"stripe:tree-props="{ children: 'children', hasChildren: 'hasChildren' }":expand-row-keys="expandedCategoryIds">categoryList 的树形结构里面有categoryId,我直接设置下面这个,也不会展开expandedCategoryIds: [758, 753, 748]

因为element-ui会把那个数值自动转换为String一直匹配不上…,后来转值了解决

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

linux先创建文件夹后指定创建文件夹用户

1、创建文件夹&#xff0c;然后创建用户并指定用户目录&#xff0c;然后修改目录所有权给该目录 # 创建 /home/test 目录 mkdir /home/test # 设置权限&#xff08;确保有适当的读写权限&#xff09; chown root:root /home/test chmod 700 /home/test # 创建 xl 用户并指定家…

大模型(LLM)全参数微调有哪些技巧,常用的轻量级微调有哪些,微调策略应该如何选择?

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下大模型(LLM)全参数微调有哪些技巧&#xff0c;常用的轻量级微调有哪些&#xff0c;微调策略应该如何选择&#xff1f;本文将从大模型(LLM)全参数微调技巧&#xff0c;常用的轻量级微调方法&#xff0c;微调策略应该…

蓝牙电话-如何自动切换手机SIM卡(预研方向)

蓝牙电话-如何自动切换手机SIM卡&#xff08;预研方向&#xff09; 一、前言 最近突然有客户问说&#xff0c;蓝牙电话的app既然已经能统计手机里面插了多少张卡&#xff0c;那能不能做双卡的SIM卡自动切换&#xff1f;即&#xff1a;设置一个呼叫策略和频率&#xff0c;当打…

【蓝桥杯C/C++】C语言和C++的常量概念与区别分析

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: 蓝桥杯C/C 文章目录 &#x1f4af;前言&#x1f4af;常量的概念和作用&#x1f4af;C语言中 const 的应用与限制#define 和 enum 的使用方法 &#x1f4af;C 中 const 的计算方法和处理&#x1f4af;代码实例和应用区别&#x1f…

全面解析亚马逊云服务器(AWS):功能、优势与使用指南

亚马逊云服务器&#xff08;AWS&#xff09;概述 亚马逊云服务器&#xff08;Amazon Web Services&#xff0c;简称AWS&#xff09;是全球领先的云计算平台&#xff0c;提供一系列强大且灵活的云服务&#xff0c;帮助企业和开发者通过云基础设施实现数据存储、计算、分析和机器…

“小浣熊家族AI办公助手”产品体验 — “人人都是数据分析师”

一、引言&#xff1a; 大家平时应该在工作中常常使用到Excel来做数据统计&#xff0c;比如临近过年时&#xff0c;公司一般会开各种复盘、年终、检讨、明年规划大会&#xff0c;势必需要准备一大堆的量化数据报表&#xff0c;用于会议上的数据汇报、分析工作&#xff0c;试想一…

C盘扩容(C盘右键无法扩展卷解决)超详细步骤!!!

目录 1、问题及需求2、解决办法方法2 1、问题及需求 今天一看C盘爆红了&#xff0c;但是D盘还剩很多空间&#xff0c;想要从D盘再分出来50G给C盘。 但是压缩了D盘&#xff0c;在C盘扩展卷&#xff0c;实现不了&#xff0c;因为不仅挨着。看下边的解决办法 2、解决办法 桌面上…

机器学习笔记 // 天气预报、股票价格以及历史轨迹(如摩尔定律)// 时间序列的常见属性

时间序列随处可见。你可能已经在天气预报、股票价格以及历史轨迹[如摩尔定律&#xff0c;见下图​]等事物中见过它们。摩尔定律预测微芯片上面的晶体管个数大约每两年会翻倍。几乎50年以来&#xff0c;它已经被证明对未来的计算能源和成本来说是一个准确的预测器。 许多时间序列…

mysql日志写满出现The table ‘xxxx_amazon_order’ is full

数仓发现写数据出现 SQL 错误 [1114] [HY000]: The table ‘xxxx_amazon_order’ is full 1.第一时间查看系统磁盘, 发现空间写满了 df -h因为mysql是使用docker部署的, Docker 的默认存储位置在 /var/lib/docker /var 目录默认是在根分区 (/dev/mapper/centos-root) 下的 …

(一)Ubuntu22.04服务器端部署Stable-Diffusion-webui AI绘画环境

一、说明 cup型号&#xff1a; Intel(R) Celeron(R) CPU G1610 2.60GHz 内存大小&#xff1a; 8G 显卡型号&#xff1a;NVIDIA P104-100 注意&#xff1a;系统睡眠问题 sudo systemctl mask sleep.target suspend.target hibernate.target hybrid-sleep.target 网卡设置 …

springboot:少量配置信息情形

发现无论怎么改都还是指向8001 所以换一种方法 通过 结果 代码 import org.springframework.beans.factory.annotation.Value; import org.springframework.boot.web.server.ConfigurableWebServerFactory; import org.springframework.boot.web.server.WebServerFactoryCusto…

SpringBoot的快速入门

Maven Maven可以方便管理依赖的 Jar 包 IDEA 自带Maven&#xff0c;也可以选择自己安装 安装Maven:https://blog.csdn.net/qq_59636442/article/details/142314019 创建项目 通过Spring Initializr 快速创建项目&#xff1a;https://start.springboot.io/ 我的项目名叫blog&a…

2024中国高校计算机大赛 — 大数据挑战赛-赛后复盘

一、赛题描述 基于气象大数据的自动站实况联合预测 风光清洁能源的管理与气象关系密不可分&#xff0c;因为风能和太阳能的发电效率直接依赖于气象条件。风力发电需要精确的风速和风向预测&#xff0c;而太阳能发电则依赖于日照时间和云层覆盖情况的准确预报。优质的气象预测…

J.U.C - 深入解析ReentrantLock原理源码

文章目录 概述synchronized的缺陷1&#xff09;synchronized不能控制阻塞&#xff0c;不能灵活控制锁的释放。2&#xff09;在读多写少的场景中&#xff0c;效率低下。 独占锁ReentrantLock原理ReentrantLock概述AQS同步队列1. AQS实现原理2. 线程被唤醒时&#xff0c;AQS队列的…

基于Java+Springboot+Jpa+Mysql实现的在线网盘文件分享系统功能设计与实现二

一、前言介绍&#xff1a; 免费学习&#xff1a;猿来入此 1.1 项目摘要 在线网盘文件分享系统的课题背景主要源于现代社会对数字化信息存储和共享需求的日益增长。随着互联网的普及和技术的快速发展&#xff0c;人们越来越依赖电子设备来存储和传输各种类型的数据文件。然而…

DBSCAN聚类——基于密度的聚类算法(常用的聚类算法)

DBSCAN&#xff08;Density-Based Spatial Clustering of Applications with Noise&#xff09;简称密度聚类或密度基础聚类&#xff0c;是一种基于密度的聚类算法&#xff0c;也是一种常用的无监督学习算法&#xff0c;特别适用于形状不规则的聚类和含有噪声的数据集。主要用于…

C++:指针和引用

指针的基础 数据在内存当中是怎么样被存储的 数据在内存中的存储方式取决于数据的类型和计算机的体系结构 基本数据类型 整数类型&#xff1a;整数在内存中以二进制补码的形式存储。对于有符号整数&#xff0c;最高位为符号位&#xff0c;0 表示正数&#xff0c;1 表示负数。…

LabVIEW多通道面阵烟雾透过率测试系统

LabVIEW面阵烟雾透过率测试系统通过高精度多通道数据采集和实时处理技术&#xff0c;能够实现对固体推进剂烟雾的透过率进行精确测量。系统利用了LabVIEW的图形化编程环境及其丰富的设备驱动接口&#xff0c;有效提升了测试的自动化程度和数据处理的实时性。 项目背景&#xf…

PDF电子发票信息转excel信息汇总

PDF电子发票信息提取&#xff0c;支持将pdf发票文件夹下的剩所有发票&#xff0c;转为excel格式的信息&#xff0c;对于发票量比较大&#xff0c;不好统计&#xff0c;需要一个一个去统计的情况&#xff0c;可节省2个点以上的时间&#xff0c;一次下载&#xff0c;终身有效。 使…

51c视觉~合集7

我自己的原文哦~ https://blog.51cto.com/whaosoft/11536996 #Arc2Face 身份条件化的人脸生成基础模型&#xff0c;高一致性高质量的AI人脸艺术风格照生成 将人脸特征映射到SD的CLIP的编码空间&#xff0c;通过微调SD实现文本编码器转换为专门为将ArcFace嵌入投影到CLIP潜在…