ant design vue 中a-tree搜索查询
搜索查询并改变字体颜色。
<a-card class="leftTree" :bordered="false" :loading="treeLoading" style=""><h2>源列表</h2><a-input-search v-model="searchStr" placeholder="输入搜选项" style="width:200px;" @search="onSearch"></a-input-search><a-treeclass="treeStyle"v-model="checkedKeys"checkablemultiple:auto-expand-parent="autoExpandParent":expanded-keys="expandedKeys":tree-data="treeData":selected-keys="selectedKeys":replaceFields="replaceFields"@expand="onExpand"@select="onSelect"@check="onCheck"><template slot='name' slot-scope="{name}"> <span v-html="name.replace(new RegExp(searchValue, 'g'),'<span style=color:#f50>' + searchValue + '</span>')"></span></template></a-tree><a-button type="primary" @click="treeOk" class="rightClass"> <span>→</span> </a-button></a-card>
onSearch(){var vm=this;vm.searchValue = vm.searchStr;if(vm.searchValue === ''){vm.expandedKeys = [];}else{vm.expandedKeys = [];vm.backupsExpandedKeys = [];let candidateKeysList = vm.getkeyList(vm.searchValue,vm.treeData,[]);candidateKeysList.map(item=>{var key=vm.getParentKey(item,vm.treeData);if(key && !vm.backupsExpandedKeys.some(item=>item===key))vm.backupsExpandedKeys.push(key);})let length=this.backupsExpandedKeys.length;for(let i=0;i<length;i++){vm.getAllParentKey(vm.backupsExpandedKeys[i],vm.treeData)}vm.expandedKeys = vm.backupsExpandedKeys.slice();}},//获取节点中含有value的所有key集合getkeyList(value,tree,keyList){for(let i=0;i<tree.length;i++){let node = tree[i];node.scopedSlots={title: 'name'}if(node.name.indexOf(value)>-1){keyList.push(node.code);}if(node.children){this.getkeyList(value,node.children,keyList);}}return keyList;},//该递归主要用于获取key的父亲节点的key值getParentKey(key,tree){let parentKey,temp;for(let i=0;i<tree.length;i++){const node=tree[i];if(node.children){if(node.children.some(item=>item.code===key)){parentKey = node.code;}else if(temp=this.getParentKey(key,node.children)){parentKey = temp;}}}return parentKey;},//获取该节点的所有祖先节点getAllParentKey(key,tree){var parentKey;if(key){parentKey = this.getParentKey(key,tree);if(parentKey){if(!this.backupsExpandedKeys.some(item=>item===parentKey)){this.backupsExpandedKeys.push(parentKey);}this.getAllParentKey(parentKey,tree);}}},
实现效果:
ant design vue 中a-tree搜索查询相关推荐
- 解决ant design vue中的modal弹框样式修改无效问题 修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的 原因在于弹框modal被挂载在最大的元素div外面了 所以需要将挂载在某个html元素上 在modal外 ...
- ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式 问题 历程 UploadList 组件源码 h() 方法 实现 注 问题 技术:vue.ant design vue 在开发项 ...
- Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题 在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
- Ant design vue中实现动态更换主题色
一.创建vue项目 可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口 输入文件名 ,文件名最好是英文 然后进行配置功能, 根据需求选择配置功能 这里最好选择2.0版本, 可以 ...
- Ant Design Vue 中 Tree 树形控件 defaultExpandAll 设置无效
问题: 在代码中设置了default-expand-all属性 树形结构还是没有展开 原因: 因为default-expand-all属性是用来设置默认值的,而初始值treeData通常情况下是需要调 ...
- oracle中showTime用法,ant design vue中日期选择框混合时间选择器的用法
首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: 其中,showTime.defaultValue是设置的默认展 ...
- Vue - Ant Design Vue 中 <a-select> 选择器组件,既可从下拉列表选择,又可输入手动输入文本(既可下拉选择又可自己输入)
前言 网上的代码基本上都是无效的,且代码非常乱还有bug. 这种需求其实不算太常见,网上基本没有相关文章, 本文给您提供一样详细的示例,您可以快速移植到您的项目中. 如果您要实现如下图所示 既可下拉选 ...
- Ant Design Vue中出现报错: Invalid prop: custom validator check failed for prop “pagination“
一.问题背景 最近在搞一个英语学习平台管理系统的时候,遇到了一个问题,莫名奇妙报了一个pagination的校验错误警告,这可把我整懵逼了看了一下代码,也没有错撒,而且我之前封装的组件用的好好的,怎么 ...
- ant design vue 中Notification隐藏右上角叉号
this.$notification.open({key: tasksKey,message: 'message',duration: 0,placement: 'topLeft',descripti ...
- Ant Design Vue中a-select组件下拉列表在局部滚动时不跟随问题解决方法
问题如下: 修改方法如下 <a-tree-select:getPopupContainer="triggerNode => {return triggerNode.parent ...
最新文章
- NIO框架之MINA详解
- php ajax 框架,PHP开发框架kohana中处理ajax请求的例子
- C#代码总结02---使用泛型来获取Asp前台页面全部控件,并进行属性修改
- php向下滑动,js如何判断鼠标滚轮是向下还是向上滚动
- HBase ACL管理 Hbase 权限管理
- Windows2008R2 --Active Directory回收站
- channelfuture怎么拿到数据_SpringBoot2.x系列教程66--Spring Boot整合分布式事务之数据库事务回顾
- python中dtypes_Dataframe创建及index,columns,values,dtypes等属性介绍
- 3dmax导入REVIT
- 【Python计量】内生性问题、工具变量法与二阶段最小二乘法2SLS
- 合法免费下载电子书的站点整理收藏
- 【Pandas 基础应用 合并Excel工作簿】
- 中职学校计算机技能大赛总结,中职学校技能大赛总结
- oracle漏洞修补,01-oracle漏洞修复
- Selenium 定位Loading元素图标,只需要简单配置下就行
- 取消研究生论文发表需求,985大学官宣!
- photon四种同步方式_Photon——主从服务器负载均衡及策略
- 经典IIR数字滤波器设计一般步骤的总结
- PS做以图片为文字背景
- Array.of()