antd select 模糊搜索节流

最新推荐文章于 2024-06-30 16:41:12 发布
最新推荐文章于 2024-06-30 16:41:12 发布
阅读量736 收藏
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42327537/article/details/116940637
版权 
import { debounce } from 'lodash';
//debounce 关键字
getMasterWorkerInfoFUN = debounce(value => {
    const { initParam } = this.state;
    initParam.fteacherJobNo = value;
    getMasterWorkerInfo(initParam);
  }, 500);
在路上等
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 搜索框模糊查询 + 优化(节流) + 关键字高亮
我仰泳一级棒
01-12 3896
直接上代码 HTML视图层代码 <template> <!-- 模糊查询 + 节流 --> <div> <input type="text" placehold="请输入id进行查询" v-model="inputValue" ref="input" @keyup="goSearch" /> <!-- 这里v-show比v-if省性能 --> &lt
AntD选择器Select模糊搜索，限制个数、字符长度、显示个数
莉兹Liz的博客
12-21 6973
需求 AntD选择器Select模糊搜索，最多选5个，最长字符6个，多余省略号显示，选择超过1个第二个+n显示。 代码 import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Select } from 'antd'; const { Option } = Select; const children = []; for
antd select组件使用onSearch踩坑
Wind_waving的博客
09-26 3354
问题：使用onSearch的时候搜索列表不能及时显示 解决办法：参考
antd Select前端加模糊搜索
最新发布
m0_63788547的博客
06-30 370
antd Select前端加模糊搜索
ant design vue带有远程搜索，节流控制，请求时序控制，加载状态的下拉选择框a-select 与 a-select-option 踩坑,清除后placeholder不显示
MrChkk的博客
09-26 1447
<template> <a-select allowClear :value="value" @search="fetchData" @change="selectChange" :placeholder="holder" :not-found-content="fetching ? undefined : '暂无数据'" :filterOption="false" :getPopupContainer="triggerN
react-ant-design带有下拉框选择的搜索功能实现详解（表格组件的使用）
WebView
01-15 7091
1、预实现效果 2、首先我们使用的是调用的是公共的封装组件，表格组件的封装在另一篇文章中。封装组件使用 在本页面中向子组件传入这些方法 3、然后开始单独实现每一个方法，这里首先列表有数据当然需要先渲染数据，这里怎么渲染在我的另一篇文章中有。 当然查询都是调同一个接口。 查询状态 // 查询状态 handleChangeRegistrationState = (value) =&...
ant design a-select 通过onSearch获取的数据,数据源更新，但视图没更新的问题（vue3+tsx）
m0_57607072的博客
01-19 2235
ant design a-select 数据源更新，但视图没更新的问题 ​ 在使用a-select时，发现通过onSearch事件从后端获取到的数据已经更新到了数据源，但是页面上没有任何反应，第一反应是响应式丢失了，然后从控制台输出出来发现并不是数据的问题。 ​ 最后看文档示例时发现，select的filterOption属性默认为true…等于说组件在接受到我的数据后又过滤了一遍，这才导致前面看到的数据源更新，视图无变化的问题，把filterOption改为false或者是定义一个filter方法就行了
antd-virtual-select:长列表优化antd select组件
05-12
开始 npm i antd-virtual-select 功能特性 使用 antd Select dropdownRender 方法自定义原组件下拉列表部分 虚拟滚动渲染，只渲染可视区列表，滚动...基本使用同 antd Select，只是使用 SuperSelect 代替 Select impo
antd form 封装可搜索可输入select
03-29
antd form 封装可搜索可输入select
深入理解Antd-Select组件的用法
10-15
同时，对用户输入的搜索关键词进行高效匹配，例如使用模糊搜索算法。 综上，针对Antd-Select组件在处理大量数据时的性能挑战，开发者可以采取多种策略进行优化，包括但不限于延迟加载、分页、过滤优化等，以提升...
Antd中Select组件搜索高亮
小醋包的博客
04-24 3349
Antd中Select组件搜索高亮 需求：默认时的状态： 点击时出现搜索框可以搜索： 搜索时关键字高亮： 实现方法一： import React from 'react' import { Select } from 'antd' import { import React, { useEffect, useState, useRef, } from 'react' import {Select} from 'antd' const SelectSearch = (props) =&gt
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。 当然这不是我想去优化它的动力，主要是公司业务人员和后端的同事也无法忍受，于是我只能屈从于他们的淫威。。。。 想要优化肯定要知道为什么会卡，初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿，于是想要不卡只能限制渲染的数据数量。 我的想法是这样的：任何时候都只渲染前100条数据以保证不卡顿，然后当需要搜索的时候对从后台拿到的数据进行过滤，也只取前100条，然后当select框不下拉
防抖和节流
KEEP RUNNING的博客
08-16 3090
在进入学习之前，先想一件事情：从哪听说的这俩名词？ 我想大部分人应该是在编程中遇到问题后听他人说的。我希望看完这篇博客后能帮你解决实际问题，不只玩玩而已。 简单来说，防抖与节流是为了优化性能，提升用户体验的。 实现原理都是延迟执行，减少调用次数。 不同的是，对于一段时间内的频繁调用，防抖是延迟执行后一次调用，节流是延迟定时多次调用。 使用场景：一般为存在用户交互，需要监听DOM元素时。 下面我们模拟场景，带你学透防抖与节流 防抖 模拟场景：一个搜索输入框，在输入后立即（实时）展现搜索结
搜索提示：js函数节流和去抖动的方法
言凡的博客
09-07 1349
需求 粗暴的解决方案 问题 优雅的解决方案 使用debounce 使用throttle 需求 模糊查询 在输入框中输入内容 需要在下拉框中实时显示搜索结果 类似百度搜索提示 粗暴的解决方案 给输入框绑定监听事件，可选： onkeydown：键按下的过程 onkeypress：键被按下 onkeyup：键被松开 onchange：元素失去...
【Antd+Vue】解决Antd select框渲染大量数据卡顿问题
热门推荐
Emily's Blog
07-21 1万+
解决Antd select框渲染大量数据卡顿问题一、模拟卡顿场景二、优化方案三、代码拿走即用 一、模拟卡顿场景 在使用ant design vue开发时候，可能会遇到Select框需要加载几百条甚至上千条数据的场景，比如说需要选个员工啥的。 有的小伙伴可能会说了，这么多数据，为啥不分级展示？但有的时候，数据的底层不是我们前端说改就能改的啊，产经给出这需求只能给它搞定！ 根据下图可以看到，当Select的数据源是很多条数据的时候，点击Select框就会卡顿，更别说搜索啥的了。 二、优化方案 优化方案：初次
antd Select进阶功能 动态更新、函数防抖
weixin_30772261的博客
11-19 887
一、动态更新Options Antd Select自带的搜索功能很多时候需要结合后端的接口，输入一个关键字的时候会自动更新选择器的选项. 下面列一些注意点 基础实现 选择器选项必须和每次更新的数据挂钩, 这个值可以通过state,也可以通过props拿到 再结合循环的方法例如map遍历渲染options import React, { PureComponent, Frag...
antd表单性能改进实践 debounce 高阶组件
ff00yo的博客
03-24 2215
摘要 随着es2015、babel等技术在前端迅速普及，前端开发效率大幅提升。vue、react之类的框架也被广泛采用。在使用基于react的antd构建后台系统的过程中遇到了明显的性能问题。在上期文章发表后收到了许多赞。随着使用场景的变化，又有许多性能问题暴露出来。因此继续研究antd的性能问题，寻找最终解决方案。 antd简介 antd是由阿里旗下的 蚂蚁金服体验技术部 开发的一套UI设计语...
react antd input防抖
想快快长大的博客
03-17 4997
const debounce = (fn, wait) => { let timeout = null; return function(input) { input.persist(); if (timeout !== null) clearTimeout(timeout); timeout = setTimeout(fn, wait,...
防抖节流以及React Hook中的防抖节流
lovezhuer1的博客
03-22 4617
React Hook防抖前言一、pandas是什么？二、使用步骤1.引入库2.读入数据使用Umi Hooks防抖节流 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： impor
antd filtertreenode 模糊搜索
09-15
antd FilterTreeNode组件提供了一个模糊搜索的功能。你可以通过设置`filterTreeNode`属性为`true`来开启该功能。当开启了模糊搜索后，FilterTreeNode组件会在树节点中搜索匹配的内容，并将匹配的节点展示出来，其他不匹配的节点将被隐藏。 下面是一个示例代码： ```jsx import { Tree } from 'antd'; const { TreeNode } = Tree; function filterTreeNode(node, keyword) { const title = node.props.title.toLowerCase(); return title.indexOf(keyword.toLowerCase()) > -1; } function generateTreeNodes(treeData, keyword) { return treeData.map((item) => { const { title, children, ...rest } = item; const isMatched = filterTreeNode({ props: { title } }, keyword); const treeNodeProps = isMatched ? rest : { style: { display: 'none' } }; if (children) { return ( <TreeNode {...treeNodeProps} title={title} key={title}> {generateTreeNodes(children, keyword)} </TreeNode> ); } return <TreeNode {...treeNodeProps} title={title} key={title} />; }); } function App() { const treeData = [ { title: 'Node 1' }, { title: 'Node 2', children: [{ title: 'Child Node 1' }, { title: 'Child Node 2' }] }, { title: 'Node 3', children: [{ title: 'Child Node 3' }] }, ]; const keyword = 'Node'; return ( <Tree filterTreeNode={true}> {generateTreeNodes(treeData, keyword)} </Tree> ); } ``` 在上面的示例代码中，我们定义了一个`filterTreeNode`函数来判断节点是否匹配搜索关键字。然后使用`generateTreeNodes`函数递归生成带有匹配样式的树节点。最后，在`Tree`组件中设置`filterTreeNode`属性为`true`来开启模糊搜索功能。 你可以根据自己的需求修改示例代码中的`treeData`和`keyword`来实现你想要的模糊搜索效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值