vxe-table3.0的表格树如何做深层查找,返回搜索关键字的树形结构

news2024/11/15 23:40:41

vxe-table2.0版本是提供深层查找功能的,因为他的数据源本身就是树形结构,所以深层查找查询出来也是树形结构。
但是vxe-table3.0版本为了做虚拟树功能,将整个数据源由树形垂直结构变成了扁平结构,便不提供深层查询功能,提供的筛选功能筛选出的结果也不如2.0版本,会把筛选目标的所有平均数据一起返回,不理想,那么怎么将2.0版本的深层查找功能用到3.0版本呢?

先看一下2.0版本如何做深层查找的

(1)后端给前端的数据源还要是树形结构。
前端通过js将树形结构转成扁平结构复制给tableData,那么在vxe-table3.0便可以虚拟滚动了。
转换代码:

     treeToList(list) {
            let res = []
            for (const item of list) {
                const { children, ...i } = item
                if (children && children.length) {
                res = res.concat(this.treeToList(children))
                }
                res.push(i)
            }
            return res
        },

(2)this.originData = 树形结构表格数据 ,搜索的时候,originData还是树形结构的,2.0版本的XEUtils.searchTree还是可以使用的,搜索结果是树形结构,那么把这个树形结构的搜索结果再转成扁平结构赋给表格,就能得到搜索结果也是虚拟滚动的啦。

思路就是这样:
关键代码:
 

<a-input @change="onSearch" v-model="searchValue" style="width: 280px" placeholder="请输入关键字搜索" />
 <vxe-table 
        v-if="virtualTree"  
        show-overflow 
        height="300" 
        ref="xTree" 
        row-id="id" 
        :border="false" 
        :show-header="false" 
        :data="treeData"  
         :tree-config="{ transform: true,parentField:'pid',childrenField: 'children', expandAll: rootOpened ? true : false }" 
         :scroll-y="{enabled: true, gt: 10}">
        </vxe-table>



//初始化数据
loadDepart() {
            queryEquipmentTreeList().then((res) => {
                if (res.success) {
                    this.treeData = []
                    this.originData = XEUtils.clone(arr, true)
                    this.treeData = this.treeToList(arr)
                    if (this.rootOpened) {
                        this.$nextTick(() => {
                            if (this.$refs['xTree']) {
                                this.$refs['xTree'].setAllTreeExpand(true)
                            }
                        })
                    }
            })
        },

//扁平化处理数据
treeToList(list) {
            let res = []
            for (const item of list) {
                const { children, ...i } = item
                if (children && children.length) {
                res = res.concat(this.treeToList(children))
                }
                res.push(i)
            }
            return res
        },

//搜索
 onSearch: XEUtils.debounce(
            function () {
                this.dropDownShow = true
                this.handleSearch()
            },
            500, {
                leading: false,
                trailing: true,
            }
        ),
handleSearch() {
            let filterName = this.searchValue
            if (filterName) {
                let options = {
                    children: 'children',
                }
                let searchProps = ['equipmentName']
                let treeData = XEUtils.searchTree(
                    this.originData,
                    (item) => searchProps.some((key) => item[key].indexOf(filterName) > -1),
                    options
                )
                // 搜索之后刷新树
                this.virtualTree = false
                this.$nextTick(() => {
                    this.virtualTree = true
                })
             // 搜索之后默认展开所有子节点
                this.$nextTick(() => {
                    if (this.$refs.xTree) {
                        this.$refs.xTree.setAllTreeExpand(true)
                    }
                })
                this.treeData = [...this.treeToList(treeData)]
                
            } else {
                this.virtualTree = false //用于让树重新加载的标识
                this.$nextTick(() => {
                    let treeData = this.originData
                    this.treeData = [...this.treeToList(treeData)]
                    this.virtualTree = true
                })
                
            }
        },

如果后端给你的本来就是扁平化的数据,也是一样的,你把他处理成树形结构,在页面循环使用是一样的思路。

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

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

相关文章

代码随想录 Leetcode108. 将有序数组转换为二叉搜索树

题目&#xff1a; 代码(首刷自解 2024年1月31日&#xff09;&#xff1a; class Solution { public:TreeNode* recursion(vector<int>& nums, int left, int right) {if (left > right) return nullptr;int mid left (right-left)/2;TreeNode* node new TreeN…

Linux 入门基础知识(一)—— Linux的基本使用

Linux 入门基础知识 一、Linux的基本使用和配置1.1、终端1.2、消耗内存1.3、运行级别1.6、登录前欢迎语1.5、登录后欢迎语1.6、shell1.7、ps aux1.8、设置主机名1.9、whoami和who am i1.10、命令提示符 二、Linux执行命令的过程详解和命令类型2.1、命令执行2.2、hash缓存表2.3、…

在线摸头GIF生成系统源码

在线摸头GIF在线生成器html网页源码&#xff0c;可以点击选择文件按钮&#xff0c;或者直接将图片拖入&#xff0c;即可生成导出

Centos7安装原生Nginx并配置反向代理

一、背景 当我的应用程序需要集群化部署之时&#xff0c;必然需要一个反向代理&#xff0c;当然Nginx的大名&#xff0c;这里不做更多的介绍了&#xff0c;这里介绍一下Nginx常用的四大阵营 1 Ngnix 原生版本 nginx news 2 Nginx Plus 商用版&#xff08;收费的&#xff09…

STM32——USART

一、通信 1.1通信是什么&#xff1b; 通信是将一个设备的数据发送到另一个设备中&#xff0c;从而实现硬件的扩展&#xff1b; 1.2通信的目的是什么&#xff1b; 实现硬件的扩展-在STM32中集成了很多功能&#xff0c;例如PWM输出&#xff0c;AD采集&#xff0c;定时器等&am…

使用AKStream对接gb28181

优点&#xff1a;功能比较多&#xff0c;C#开发的&#xff0c;容易修改&#xff0c;内嵌入了zlmk流媒体服务品&#xff0c;启动简单 缺点&#xff1a;sip对摄像头兼容还有问题&#xff0c;大华接入非常不稳定&#xff0c;注册等待时间久&#xff0c;对海康是正常&#xff0c;占…

Unity_颜色空间GammaLinear

Unity_颜色空间Gamma&Linear Unity颜色空间的选择对于效果的影响具体有多大&#xff1f; 在ProjectSetting -> Player -> OtherSetting -> Rendering设置下的颜色空间选项卡选择颜色空间进行设置&#xff1a; 太深奥的解释一时半会看不懂&#xff0c;找见一个粗…

正则表达式与文本三剑客

目录 一、正则表达式 1. 定义 2. 字符匹配 3. 重复限定符 4. 位置锚点 5. 分组和引用 6. 扩展正则表达式 二、文本三剑客 1. grep 1.1 定义 1.2 语法 1.3 选项 1.4 示例 2. sed 2.1 定义 2.2 通式 2.3 选项 2.4 脚本格式&#xff08;脚本语法&#xff09; 2.…

###C语言程序设计-----C语言学习(8)## 斐波那契数列问题,素数问题,人数分配问题。

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步。 今天&#xff0c;我们主要分享三个问题如何用C语言去求解&#xff0c;1.斐波…

京东平台数据哪里找?京东行业大盘数据(销售数据)查询软件推荐

电商时代&#xff0c;对于电商运营者来说&#xff0c;数据分析是提升竞争力、满足客户需求、保持盈利能力的关键手段。且随着电商的成熟及电商数据量的增长&#xff0c;数据分析的重要性也会越来越重要。 而在做数据分析时&#xff0c;运营者需要着重关注以下几组数据&#xf…

CISAW和CISP-PTE证书选择指南

&#x1f4e3;在信息安全领域&#xff0c;选择合适的证书可以为你的职业生涯增添光彩。很多从事信息渗透行业的朋友经常讨论CISP-PTE和CISAW之间的选择问题。今天就从4个方面带你详细了解这两张证书&#xff0c;帮你做出明智的选择&#xff01; 1️⃣证书的行业前景 &#x1f4…

8. 实现VLAN间的通信

文章目录 一. 初识VLAN通信1.1. VLAN的概述1.2. Dot1q 终结子接口(单臂路由 )1.3. VLANIF接口 二. 实验专题2.1. 实验1&#xff1a; Dotlq 终结子接口2.1.1. 实验目的2.1.2. 实验拓扑图2.1.3. 实验步骤&#xff08;1&#xff09;配置PC机的网络&#xff08;2&#xff09;交换机…

智能小程序事件系统——SJS响应事件实现方案

背景信息 如有频繁用户交互&#xff0c;在小程序上表现是比较卡顿的。例如&#xff0c;页面有 2 个元素 A 和 B&#xff0c;用户在 A 上做 touchmove 手势&#xff0c;要求 B 也跟随移动&#xff0c;movable-view 就是一个典型的例子。一次 touchmove 事件的响应过程为&#x…

java+springboot校园体育场地预约预订使用系统vue+ssm

研究内容和研究方法 1.研究内容 网站主要包括管理员和用户两个部分&#xff0c;用户可以登录与注册自己的基本信息、查询哪些场地可以使用、提前预约场地、取消预约的场地、使用完场地后进行缴费。管理员可以审批用户的注册信息、对用户信息进行增删改查、查询场地的使用情况、…

5G智慧钢铁厂数字孪生三维可视化,推进钢铁新型工业化数字化转型

5G智慧钢铁厂数字孪生三维可视化&#xff0c;推进钢铁新型工业化数字化转型。随着科技的不断发展&#xff0c;数字化转型已经成为钢铁企业转型升级的必经之路。而5G技术的广泛应用&#xff0c;为钢铁企业数字化转型提供了新的机遇。其中&#xff0c;5G智慧钢铁厂数字孪生三维可…

基于ssm和微信小程序的健身房私教预约管理系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

计算机设计大赛 垃圾邮件(短信)分类算法实现 机器学习 深度学习

文章目录 0 前言2 垃圾短信/邮件 分类算法 原理2.1 常用的分类器 - 贝叶斯分类器 3 数据集介绍4 数据预处理5 特征提取6 训练分类器7 综合测试结果8 其他模型方法9 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 垃圾邮件(短信)分类算…

亚马逊、eBay、速卖通等跨境电商自养号测评,你知道多少?

在跨境电商领域&#xff0c;自养号测评已经成为常态。大部分卖家都会进行店铺产品的测评&#xff0c;尽管平台和消费者对此持反感态度。但在竞争激烈的环境下&#xff0c;不进行测评就意味着可能被市场淘汰。 过去&#xff0c;在某些论坛上&#xff0c;我曾看到一些博主分享他…

java代码中调用自定义函数

定义函数 CREATE DEFINERrootlocalhost FUNCTION test_fun1(num1 FLOAT,num2 FLOAT) RETURNS float BEGINDECLARE SUM FLOAT DEFAULT 0;SET SUMnum1num2;RETURN SUM; END <select id"cunchu" resultType"java.util.Map">SELECT test_fun1(1,2) as r…

React通用后台模板

一. 项目初始化 1. 创建项目 环境 npm init vite 打开package.json,参考以下各模块版本: "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^7.2.8", …