treeSelect节点搜索

最新推荐文章于 2024-07-17 08:19:08 发布
最新推荐文章于 2024-07-17 08:19:08 发布
阅读量1.1k 收藏
点赞数
分类专栏： antd 遇到的坑 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43140590/article/details/131400878
版权

antd中treeSelect的filterTreeNode用法--节点搜索

以下图为例，树形搜索展开后，有以下几个选项，如果我想要搜索其中“产品中心”，那直接搜索关键词‘产品’即可
在这里插入图片描述

我搜索后并未显示我想要的结果，而是为空
在这里插入图片描述

这就需要用到 filterTreeNode这个属性了。
官方介绍：是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值;boolean | function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值)
添加filterTreeNode属性，

	filterTreeNode={(inputValue, treeNode) => {
        return treeNode?.name.indexOf(inputValue) > -1;
        }}
        //这里name要看treeNode节点的结构是什么样了，可以是title，value

结果展示
在这里插入图片描述

小栗桔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd treeselect filterTreeNode 节点搜索
elizebeth6的博客
04-14 5589
我用的版本是 vue3.0 ant 2.2.8 想实现搜索功能只需要 加一个 :filterTreeNode="filterTreeNode" // 搜索 const filterTreeNode = (value, node) => { if (node.props.name.indexOf(value) > -1) { if (node.props.dataRef.children.length !== 0) {
可自定义树节点的Tree组件
03-20
NULL 博文链接：https://as3.iteye.com/blog/865559
vue中el-tree树形组件利用filter和 filterNode方法实现模糊搜索
weixin_43312391的博客
03-17 1万+
实现效果： 初始状态： 模糊搜索效果： 实现方法： template中： <el-input placeholder="输入关键字" v-model="filterText"> </el-input> <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNod..
Antd树型选择控件TreeSelect搜索功能
hoaxxcj的博客
04-13 9597
有时候我们需要在TreeSelect中添加搜索功能，Antd是有提供对应的配置选项，两步即能实现： 1、在a-tree-select标签中添加show-search参数，这能在下拉中显示搜索框，需要注意的是仅在单选模式下生效； 2、在a-tree-select标签中添加tree-node-filter-prop参数，其值为tree-data参数绑定的数组（图中接口返回的整个data数组）的title值。 我们在搜索框中输入想要查找的内容，TreeSelect就会自动过滤搜索结果并展示，如下图：
TreeSelect可搜索
renfeideboke的博客
11-01 321
TreeSelect可搜索
TreeSelect组件输入关键词进行搜索的实现
m0_71099325的博客
12-24 470
属性,大家要注意的取值.
Ant Design的TreeSelect支持多选和搜索功能，如果查询不到，则搜索框不能清除的问题处理。
qq_35639030的博客
03-05 8491
树型选择控件多选支持搜索的时候，输入文字，匹配不到数据的时候，失去焦点或者提交表单的时候清空输入的查询文字. 问题如下截图： 想要的结果如下： 解决方案： 在AntD的Select中，当失去焦点切未查询到数据时，会自动清空搜索框的值。地址：Antd Select 在实现这个过程中，也踩了不少坑。仔细读过TreeSelect的API之后发现了一个属性，叫做searchValue。s...
antd-tree异步加载+模糊搜索
rcx0113的博客
03-26 423
实现树形组件 点击展开节点，动态加载数据，以及搜索。
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
10-14
Vue Treeselect是一款强大的 Vue.js 组件，用于创建可搜索、多选的树形下拉框。这个组件在处理复杂的数据结构时特别有用，因为它允许用户从层级化的选项中选择值。在本文中，我们将深入探讨如何在Vue Treeselect中...
treeSelect.zip
03-07
4. **搜索过滤**：内置搜索框，用户可以输入关键词快速筛选目标节点。 5. **自定义节点内容**：允许开发者自定义每个节点的显示内容，增强可定制性。 6. **事件监听**：提供丰富的事件接口，如节点点击、展开、收起...
TreeSelect.zip
04-08
4. **搜索功能（Search）**：为了方便用户快速找到所需选项，TreeSelect提供了搜索输入框，用户可以通过输入关键词来筛选树节点。 5. **加载更多（Load More）**：如果数据量较大，可以采用懒加载方式，当用户滚动...
treeselect:TreeSelect 的 JQuery UI
07-04
2. **搜索功能**：内置的搜索框允许用户快速查找特定的节点，提高用户体验。 3. **可定制的外观**：通过 CSS 样式，开发者可以调整 TreeSelect 的视觉效果，使其与应用的整体设计保持一致。 4. **事件处理**：...
TreeSelect懒加载数据，使用搜索问题
qq_37953527的博客
08-12 2319
Antd TreeSelect组件数据懒加载，添加搜索功能，搜索后无法点击下级节点问题
树形结构下拉框组件vue-treeselect的使用（安装、模糊匹配、单选、多选、延迟加载、异步搜索等）
weixin_41549971的博客
01-16 5161
树形结构下拉框组件vue-treeselect的使用（安装、模糊匹配、单选、多选、延迟加载、异步搜索等）
ant design TreeSelect支持搜索，切换value和title属性
热门推荐
SunnyRun
11-07 1万+
属性，作为显示的 prop 设置，默认是title，选中下拉选项，展示title，或者value。切换title和value过滤搜索。默认属性解决办法就是。
antd-tree树形组件带搜索框的实际应用
outstanding木槿
12-26 1138
项目中用到Tree组件，并且还能进行搜索。
elementui 树，多个查询条件搜索筛选
weixin_38655115的博客
11-15 1442
直接传入一个对象进行判断就可以实现多个筛选的操作。
antdesign（vue）中 a-tree-select组件用filterTreeNode设置筛选结果不正确
灿灿大王搭建的黄金屋
08-23 1万+
antdesign中的文档里，让我们这么筛选，那么代码里就要这么写 <a-tree-select v-model="queryParam.businessTypeIdList" multiple :filterTreeNode="filterTreeOption" show-search treeDefaultExpandAll ..
LG 选择 Flutter 来增强其智能电视操作系统 webOS
最新发布
恋猫de小郭的博客
07-17 1328
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
antd TreeSelect 搜索
05-23
如果你想要实现在antd的TreeSelect组件中进行搜索，可以通过以下步骤来实现： 1. 在TreeSelect组件中添加一个Search组件，用于输入搜索的关键字。 2. 在TreeSelect组件的onChange事件中，判断是否有搜索关键字，如果有，则对树形结构进行遍历，找出所有匹配的节点，并将这些节点的key存储到一个数组中。 3. 将存储匹配节点key的数组作为TreeSelect组件的value，这样就可以显示出所有匹配的节点。 4. 在TreeSelect组件的onSearch事件中，将搜索关键字存储到state中，以便在onChange事件中使用。 以下是一个简单的代码示例： ```jsx import React, { useState } from 'react'; import { TreeSelect, Input } from 'antd'; const treeData = [ { title: 'Node A', value: 'a', children: [ { title: 'Child A1', value: 'a1', }, { title: 'Child A2', value: 'a2', }, ], }, { title: 'Node B', value: 'b', children: [ { title: 'Child B1', value: 'b1', }, { title: 'Child B2', value: 'b2', }, ], }, ]; const TreeSelectWithSearch = () => { const [searchKeyword, setSearchKeyword] = useState(''); const [matchedKeys, setMatchedKeys] = useState([]); const traverseTree = (node, callback) => { callback(node); if (node.children) { node.children.forEach(child => { traverseTree(child, callback); }); } }; const handleSearch = value => { setSearchKeyword(value); }; const handleChange = value => { setMatchedKeys([]); if (searchKeyword !== '') { const matchedKeys = []; traverseTree({ children: treeData }, node => { if (node.title.toLowerCase().indexOf(searchKeyword.toLowerCase()) !== -1) { matchedKeys.push(node.value); } }); setMatchedKeys(matchedKeys); } }; return ( <TreeSelect value={matchedKeys} onChange={handleChange} treeData={treeData} showSearch searchPlaceholder="Search" filterTreeNode={() => true} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} > <Input.Search onChange={e => handleSearch(e.target.value)} /> </TreeSelect> ); }; export default TreeSelectWithSearch; ``` 在这个例子中，我们使用了useState钩子来保存搜索关键字和匹配节点的key。在handleSearch函数中，我们将搜索关键字存储到state中。在handleChange函数中，我们遍历整个树形结构，找出所有匹配的节点，并将这些节点的key存储到matchedKeys数组中。最后，在TreeSelect组件中，我们将matchedKeys数组作为value属性，这样就可以显示出所有匹配的节点。注意，在filterTreeNode属性中，我们返回了true，这样就可以显示所有节点，而不仅仅是匹配的节点。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值