阅读本文前提需掌握react hooks 中useState和useEffect基本用法!
?.
详见“可选链”语法糖
实现效果
实现步骤
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} = props
useEffect(() => {
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 (
<Input
value={
associatedvalue}
onChange={
e => {
setAssociatedValue(e.target.value?.trim())
}}
placeholder="请输入参数名称、参数显示名、参数说明搜索"
allowClear
style={
{
marginLeft: '20px', marginBottom: '6px', width: 350 }}
prefix={
<SearchOutlined style={
{
color: '#DEE0E8' }} />}
/>
<Table
rowKey="id"
columns={
_.filter(paramsCols, item => item.show !== false)}
dataSource={
_.uniqBy(filterparamList, 'id')}
pagination={
false}
size="middle"
scroll={
{
y: 350 }}
/>
)