protable列表实现搜索框

最新推荐文章于 2024-05-26 13:10:12 发布

原创最新推荐文章于 2024-05-26 13:10:12 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

前端专栏收录该内容

2 篇文章

订阅专栏

本文讲述了在使用Ant Design的Protable列表组件时遇到的搜索框实现问题。作者尝试将搜索图标集成到column中，但未能成功，于是选择使用Input.Search组件来实现。在onSearch方法中，作者通过弹出新页面进行搜索并回传参数，但在使用Input组件时，发现无法将搜索值回显在表单中。文章探讨了可能的原因，并分享了使用Input.Search组件的解决方案。

protable列表实现搜索框，放在column中用antd自带搜索，‘放大镜’搜索图标放不上，
于是，单独写form表单， Input.Search实现。

<Input.Search placeholder="请输入供应商名称" onSearch={() => handleVendorModalVisible(true)} />

onSearch方法弹出新页面搜索，跳转页面回传的参数value通过如下实现

form.setFieldsValue({'vendorName':value})

在这里插入图片描述

遇到的问题：
如果使用下方代码，则参数无法回显在表单中，猜测组件问题，就只能用Input.Search实现

 <Input placeholder="请输入供应商名称" onSearch={() => handleVendorModalVisible(true)} />
   <span onClick={() => handleVendorModalVisible(true)}> <SearchOutlined /></span>