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 } = itemif (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 } = itemif (children && children.length) {res = res.concat(this.treeToList(children))}res.push(i)}return res},//搜索onSearch: XEUtils.debounce(function () {this.dropDownShow = truethis.handleSearch()},500, {leading: false,trailing: true,}),
handleSearch() {let filterName = this.searchValueif (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 = falsethis.$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.originDatathis.treeData = [...this.treeToList(treeData)]this.virtualTree = true})}},

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

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

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

相关文章

【PWN · ret2syscall】[CISCN 2023 初赛]烧烤摊儿

好久未做ret2syscall 一、题目分析 漏洞点&#xff0c;栈溢出&#xff1a; 然而到该漏洞点&#xff0c;需要“花钱”买下店铺。个人所有的零钱不够。 利用整数溢出&#xff08;emmmm这里应该不算溢出漏洞&#xff0c;而是代码逻辑不规范&#xff0c;商品个数不能为负数&#x…

华为数通方向HCIP-DataCom H12-831题库(简答题01-27)

第01题 第02题 第03题 第04题 第05题 IS-IS是链路状态路由协议,使用SPF算法进行路由计算。某园区同时部署了IPV4和IPv6并运行IS-IS实现网络的互联与通。如图所示,该网络IPV4和IPV6开销相同,R1和R4只支持IPV4缺省情况下,计算形成的IPV6最短路径树中,R2访问R6的下一跳设备是…

uniapp H5 实现上拉刷新 以及 下拉加载

uniapp H5 实现上拉刷新 以及 下拉加载 1. 先上图 下拉加载 2. 上代码 <script>import DragableList from "/components/dragable-list/dragable-list.vue";import {FridApi} from /api/warn.jsexport default {data() {return {tableList: [],loadingHi…

【JAVA】Semaphore 有什么作用

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 1. 二进制信号量&#xff1a; 2. 计数信号量&#xff1a; 结语 我的其他博客 前言 Semaphore&#xff08;信号量&#xff09;作为…

uniapp微信小程序-分包

一、为什么要分包 微信小程序每个分包的大小是2M&#xff0c;总体积一共不能超过20M,当然你也可以提升启动速度&#xff0c;降低首次加载时间&#xff0c;模块化开发&#xff0c;按需加载&#xff0c;提高性能。 二、分包步骤 1.首先在 mainfest.json mp-weixin添加以下代码&a…

idea创建golang项目

目录 1、设置环境 2、创建项目 3、设置项目配置 4、初始化项目 5、安装本项目的外部依赖包 6、运行项目 7、访问页面查看结果 1、设置环境 1 启用 Go Modules 功能go env -w GO111MODULEon 2. 阿里云go env -w GOPROXYhttps://mirrors.aliyun.com/goproxy/,direct上述命…

字符串:getline、删除子串.erase()函数、插入子串.insert()函数

getline具体用法&#xff1a; 1、函数形式 getline ( cin,字符串类型&#xff1a;变量名);//默认以换行符结束 getline (cin, 字符串类型&#xff1a;变量名, ‘指定的结束符’); //指定换行结束符 2注意事项&#xff1a; 1&#xff09;如果在使用getline()之前有使用scanf(…

大数据分析案例-基于随机森林算法构建电影票房预测模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

机房建设的陷阱与规范

在数字化时代&#xff0c;数据中心的建设变得愈发重要&#xff0c;然而&#xff0c;许多集成商在机房建设中存在一些常见的误区。他们往往将机房建设仅仅定义为能源设备的安装和装修&#xff0c;而忽略了甲方的网络应用、服务器应用以及网络与服务器之间的连接应用。这导致了一…

前端-Vue項目初始化

大家好我是苏麟 , 今天聊聊前端依赖 Ant Design Vue 快速初始化项目 . Ant Design Vue官网 : 快速上手 - Ant Design Vue (antdv.com) 初始化项目 1.找到文档->快速上手 脚手架命令 : npm install -g vue/cli 2.找到一个文件夹(不要在中文路径) 下打开cmd窗口输入脚手架…

威联通docker安装青龙面板

威联通容器界面改版很多&#xff0c;没直接找到新版设置方法&#xff0c;自己摸索了一下做个记录。 一、配置docker镜像源 威联通默认的库地址国内无法直接方法&#xff0c;需要先配置国内镜像源。 在容器工作者中选择“存储库”&#xff0c;点击添加 第一个“提供商”里选…

【代码随想录-链表】两两交换链表中的节点

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

Leetcode—1828. 统计一个圆中点的数目【中等】

2024每日刷题&#xff08;一零五&#xff09; Leetcode—1828. 统计一个圆中点的数目 实现代码 class Solution { public:vector<int> countPoints(vector<vector<int>>& points, vector<vector<int>>& queries) {vector<int> a…

2023美赛A题之Lotka-Volterra【完整思路+代码】

这是2023年的成功&#xff0c;考虑到曾经付费用户的负责&#xff0c;2024年可以发出来了。去年我辅导队伍数量&#xff1a;15&#xff0c;获奖M为主&#xff0c;个别F&#xff0c;H&#xff0c;零S。言归正传&#xff0c;这里我开始分享去年的方案。由于时间久远&#xff0c;我…

android远程投屏应用

客户端app地址&#xff1a;https://gitee.com/youzilzk/blue1.git 服务端地址&#xff1a;https://gitee.com/youzilzk/blue-server1.git 一。服务端部署 1.安装postgres 2.导入项目下blue.sql文件 3.修改配置application.properties和config.properties&#xff0c;其中applic…

AMiner平台简介

AMiner是由清华大学计算机科学与技术系教授唐杰率领团队建立的&#xff0c;具有完全自主知识产权的新一代科技情报分析与挖掘平台。&#xff08;摘自用户手册&#xff09; 按照惯例我们给出网址&#xff1a;https://www.aminer.cn 我们来一起探索一下相关板块及应用。 1.科研…

Android studio 历史版本下载地址

非官方下载链接 官方下载链接 这是官网的历史版本界面的协议界面地址&#xff0c;拉到底&#xff0c;同意一下就可以看见所有的历史版本IDE

Python编辑开发 --- pycharm pro 中文

PyCharm Pro是一款专业的Python集成开发环境&#xff08;IDE&#xff09;&#xff0c;由JetBrains公司开发。它为Python开发者提供了丰富的功能和工具&#xff0c;使得Python编程变得更加高效和便捷。PyCharm Pro具有智能代码编辑功能&#xff0c;能够自动完成代码、快速导航至…

C++初阶:入门泛型编程(函数模板和类模板)

大致介绍了一下C/C内存管理、new与delete后&#xff1a;C初阶&#xff1a;C/C内存管理、new与delete详解 我们接下来终于进入了模版的学习了&#xff0c;今天就先来入门泛型编程 文章目录 1.泛型编程2.函数模版2.1概念2.2格式2.3函数模版的原理2.4函数模版的实例化2.4.1隐式实例…

刨析数据结构(一)

&#x1f308;个人主页&#xff1a;小田爱学编程 &#x1f525; 系列专栏&#xff1a;数据结构————"带你无脑刨析" &#x1f3c6;&#x1f3c6;关注博主&#xff0c;随时获取更多关于c语言的优质内容&#xff01;&#x1f3c6;&#x1f3c6; &#x1f600;欢迎来…