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

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.mfbz.cn/a/359890.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STM32——USART

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

关于maven项目构建的解释

在Idea中使用模块化构建项目 项目介绍&#xff1a; sky-take-out sky-common pom.xml sky-pojo pom.xml sky-server pom.xml pom.xml 说明 sky-server依赖sky-pojo和sky-common&#xff0c;继承sky-take-outsky-pojo继承sky-take-outsky-common继承sky-take-out 由于Idea编…

IntelliJ Idea实用插件推荐

目录 一、插件安装 二、常用插件 A、代码规范 Alibaba Java Coding Guidelines SonarLint B、快捷开发 aiXcoder-AI代码生成 AWS Toolkit-AI代码生成 CodeGeeX-AI代码生成 CodeGlance-代码缩略图 camelCase-格式转换 GsonFormatPlus-json代码生成 Sequence Giagram…

第六篇:express路由拆分(模块化)

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! ​ 目录 &#x1f4d8; 引言&#xff1a; &#x…

如何保证绩效考核的准确性及公平性?

实施绩效考核是公司为了提高工作绩效&#xff0c;提高员工工作积极性&#xff0c;进而保证公司高效运行的必要手段。但是&#xff0c;在实际管理工作中&#xff0c;很难做到绩效考核的公平、公正&#xff0c;这就会导致员工工作热情不高&#xff0c;绩效考核无法发挥应有的作用…

负载均衡下的webshell连接

一、环境配置 1.在Ubuntu上配置docker环境 我们选择用Xshell来将环境资源上传到Ubuntu虚拟机上&#xff08;比较简单&#xff09; 我们选择在root模式下进行环境配置&#xff0c;先将资源文件复制到root下&#xff08;如果你一开始就传输到root下就不用理会这个&#xff09; …

MkDocs 部署指南

简介 MkDocs 可以同时编译多个 markdown 文件&#xff0c;形成书籍一样的文件。有多种主题供你选择&#xff0c;很适合项目使用。 MkDocs 是快速&#xff0c;简单和华丽的静态网站生成器&#xff0c;可以构建项目文档。文档源文件在 Markdown 编写&#xff0c;使用单个 YAML …

PMP备考笔记:模拟考试知识点总结

1. 答题思路&#xff1a;优先看问题&#xff0c;可节省时间。 2. 考试就按照考试的套路来做&#xff0c;不要过多考虑。 开发团队只专注当前冲刺目标&#xff0c;产品负责人对PB排优先级。 收集需求工具-原型法&#xff1a;能够让用户提前体验&#xff0c;减少返工的风险。 …

龙年开春,格蠹有礼——极客少年编程套餐疯狂来袭

YOUTH 龙年开春&#xff0c;格蠹有礼 极客少年编程套餐疯狂来袭 梁启超先生曾经说过&#xff1a;“少年强则国强&#xff0c;少年富则国富&#xff0c;少年智则国智。” 少年是国家的未来和希望&#xff0c;他们的成长和发展对国家的繁荣和发展具有重要意义。笔者曾在另一篇文章…

STM32单片机基本原理与应用(四)

直流电机驱动控制原理 1、电机正反转控制 在STM32中&#xff0c;直流电机的正反转控制主要通过改变电机输入电源的极性来实现。当电机的电压极性发生变化时&#xff0c;电机的旋转方向也会相应改变。在硬件电路中&#xff0c;可以通过继电器或晶体管等电子开关来切换电机的电源…

142:vue+leaflet 加载tomtom地图(多种形式)

第142个 点击查看专栏目录 本示例介绍如何在vue+leaflet中添加tomtom地图,这里包含了多种形式,诸如中文标记、英文标记、白天地图、晚上地图、卫星影像图,高山海拔地形图等。 直接复制下面的 vue+leaflet源代码,操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例…

【前端-VUE】Vue3组件组成部分及组件通信(详解)

一、父子间通信 1.父传子&#xff1a; 2.子传父&#xff1a; 3.什么是prop Prop定义&#xff1a;组件上注册的一些自定义属性 Prop作用&#xff1a;向子组件传递数据 特点&#xff1a; 可以传递任意数量的prop可以传递任意类型的prop 3.1 props校验 思考&#xff1a;组件的prop…

【脑电信号处理与特征提取】P5-彭薇薇:脑电信号的预处理及数据分析要点

彭薇薇&#xff1a;脑电信号的预处理及数据分析要点 脑电 脑电是神经活动的测量方法&#xff0c;在不同位置测量有不同的方法。比如大脑皮层表面测量的是ECoG&#xff0c;在头皮测量的是EEG。除了EEG是无损的&#xff0c;其他都是有损的。 脑电信号采集系统 下面是完整的…

seata Adjusted frame length exceeds 8388608: 539959368,nacos+mysql+seata部署

问题&#xff1a;docker 部署 seata 后出现异常 seata Adjusted frame length exceeds 8388608: 539959368 CSDN上找了一圈都解决不了。github又半天访问不上。后来终于访问上了&#xff0c;发现这是一个很离谱的问题。。。 原因&#xff1a;访问错了端口 seata默认分两个端口…

字符串中的单词反转【leetcode】

本题选自leetcode图解算法数据结构一书 你在与一位习惯从右往左阅读的朋友发消息&#xff0c;他发出的文字顺序都与正常相反但单词内容正确&#xff0c;为了和他顺利交流你决定写一个转换程序&#xff0c;把他所发的消息 message 转换为正常语序。 注意&#xff1a;输入字符串…

充电桩项目实战:搞定多数据源!

你好&#xff0c;我是田哥 最近&#xff0c;我在对充电桩项目进行微服务升级中&#xff0c;既然是项目升级&#xff0c;难免会遇到各种各样的问题。比如&#xff1a;分布式事务问题、多数据源问题、分布式锁问题等。 项目技术栈&#xff1a; SpringSpring BootSpring Cloud Ali…

Redis常见数据类型[上]

目录 前言&#xff1a; 基本全局命令 KEYS EXISTS DEL EXPIRE TTL TYPE 数据结构和内部编码 内部编码&#xff1a; 单线程架构 引出单线程模型&#xff1a; 为什么单线程还这么快&#xff1f; String字符串 字符串数据类型&#xff1a; 常见命令&#xff1a; S…

第十四篇【传奇开心果系列】BeeWare的Toga开发移动应用示例:Toga实现页面切换

传奇开心果系列博文 系列博文目录BeeWare的Toga开发移动应用示例系列博文目录前言一、Toga页面跳转和切换方式方法介绍二、使用TabView来实现页面切换三、使用页面堆栈管理器(Page Stack Manager)来实现页面切换四、使用网格布局(Grid Layout)和可见性控制来实现页面之间的…

防御保护--NAT策略

目录 NAT策略 NAT类型 server-map表 P2P --- peer to peer 网络类型 ​编辑 目标NAT--服务器映射 双向NAT ​编辑 多出口NAT NAT策略 静态NAT --- 一对一 动态NAT --- 多对多 NAPT --- 一对多的NAPT --- easy ip --- 多对多NAPT 服务器映射 源NAT--基于源IP地址进行转…

算法:分界线

一、算法描述 电视剧《分界线》里面有一个片段&#xff0c;男主为了向警察透露案件细节&#xff0c;且不暴露自己&#xff0c;于是将报刊上的字 剪切下来&#xff0c;剪拼成匿名信。 现在有一名举报人&#xff0c;希望借鉴这种手段&#xff0c;使用英文报刊完成举报操作。 但为…
最新文章