实现效果

实现步骤

1.引入

SearchOutlined 图标
filterparamList：在原始表数据中筛选后的结果列表
associatedvalue：input输入框的值(搜索值)

import { SearchOutlined } from '@ant-design/icons'
const [associatedvalue, setAssociatedValue] = useState()
const [filterparamList, setFilterParamList] = useState([])

2.初始化

根据当前组件获取表格值的方式进行不同的引入初始化：

重要：初始化原始表格数据

后续步骤中useEffect使用的触发条件是associatedvalue变化，筛选后的列表filterparamList才会相应得到数据
也就是说，如果刚进去input是无值的，filterparamList 会是空白，渲染到表格也是空白，所以我们需要给filterparamList 赋一个初始值，为表格的初始数据（总数据）。

方法一：组件中请求接口获得数据
接口返回值res.result中为

getAllPublicParam(xxxxx).then(res => {if (res?.success) {setFilterParamList(res.result)     //初始化设置，防止开始空白情况，接收筛选后的列表} else {message.error(res?.message || '接口异常')}
}

方法二：组件中获得父组件传来的表数据props
data为传来的表格初始数据，用一个useEffect设置filterparamList 的初始值

const {data} = propsuseEffect(() => {setFilterParamList(data.list || [])
}, [data])

3.筛选数据

监听associatedvalue改变来关联filterparamList 的更新，使用filter来筛选搜索条件

useEffect(() => {if (associatedvalue !== '') {       //当value不为空时setFilterParamList([])setFilterParamList(data?.list?.filter(item => {   //  name,displayName,paramValue为接口数据中属性（根据需求灵活变更）//  其中任一含有associatedvalue则通过筛选if (item?.name?.indexOf(associatedvalue) !== -1 ||item?.displayName?.indexOf(associatedvalue) !== -1 ||item?.paramValue?.indexOf(associatedvalue) !== -1) {return true}return false}),)} else {  //为空时将渲染原始表格数据setFilterParamList(data?.list)}
}, [associatedvalue])

4.输入和展示数据

input中onchange 与value配合，可以实时更改associatedvalue并触发筛选useEffect
table中dataSource赋值的数据将会展示在表格中，此处应为筛选结果列表filterparamList

tip：paramsCols为表格的表头数据，此处不展开（与搜索功能无关），具体使用可详见antd文档

return (
<Inputvalue={associatedvalue}onChange={e => {setAssociatedValue(e.target.value?.trim())}}placeholder="请输入参数名称、参数显示名、参数说明搜索"allowClearstyle={{ marginLeft: '20px', marginBottom: '6px', width: 350 }}prefix={<SearchOutlined style={{ color: '#DEE0E8' }} />}
/>
<TablerowKey="id"columns={_.filter(paramsCols, item => item.show !== false)}dataSource={_.uniqBy(filterparamList, 'id')}pagination={false}size="middle"scroll={{ y: 350 }}
/>
)

React hooks + antd前台实现input搜索框实时搜索table表格相关推荐

类似百度搜索框实时搜索的实现
1.html代码 <input type="text" name="ProjectNumber" id="ProjectNumber" ...
Win10左下角搜索框无法搜索点击无反应的解决方法
为了更便捷,在Win10系统经常会使用到桌面左下角的搜索框进行搜索程序,但是近期Win10搜索框搜不到任何东西,点开就是白框一片空白,不知道如何解决!那么Win10搜索框用不了? 具体解决方法: 1. ...
windows10搜索框不能搜索解决方法
原文出处:https://blog.csdn.net/qq_40875146/article/details/81742533 解决Windows10搜索框不能搜索问题. 1.首先,打开管理员命令窗口 ...
解决win10搜索框无法搜索本地应用或无反应
解决win10状态栏的搜索框无法搜索本地应用或无反应今天突然出现的问题,在状态栏左下角的搜索框搜索cmd,本来要以管理员运行,结果没有任何反应. 解决办法: 1.首先,打开管理员命令窗口,输入sta ...
Win10左下角搜索框无法搜索无反应的解决方案
为了更便捷,在Win10系统经常会使用到桌面左下角的搜索框进行搜索程序,但是近期Win10搜索框搜不到任何东西,点开就是白框一片空白,不知道如何解决!那么Win10搜索框用不了?下面装机之家分享一下W ...
Win10任务栏搜索框无法搜索,显示白色页面
Win10任务栏搜索框无法搜索,显示白色页面如果确定: Windows search服务启动打开 %LocalAppData%\Packages\windows.immersivecontrolp ...
[React hooks] Antd Form: Instance created by `useForm` is not connected to any Form element.Forget t
场景: Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `for ...
Input搜索框与搜索图标对齐解决方法
出现的情况有些网站需要在搜索框旁写一个紧挨着的放大镜图标框.这时候可能就牵涉到对齐问题. 例如小米商城搜索框: 可以简单写一下这两个框: <div class="header-sea ...
静态html如何设置搜索框,html搜索框怎么设置？html搜索框input标签的使用方法实例...
本篇文章主要讲述的是关于HTML 搜索框的设置,还有html 搜索框input标签的一些使用方法实例,接下来就让我们一起来阅读这篇关于html 搜索框的文章吧首先我们来设置一个简单的搜索框: 这是一 ...

React hooks + antd前台实现input搜索框实时搜索table表格

文章目录