思路:
table
子组件监听传入值,声明一个ref
默认为false
,在监听传入值的effect
里,将ref
的current
变成true
,在表格的onchange
方法内将ref
变成false
,在每次拿到table
数据的返回值时,判断ref
的值是否为true
,是则遍历表头,通过表头子项的filterSearch
来判断是否是筛选项,是则将该值赋为null
import { useEffect, useState, useRef } from 'react'
export default function MyTable (prop) {
const{listenData} = prop
const hasChangeRef = useRef(false)
useEffect(() => {
if (!listenData.length) return
hasChangeRef.current = true
getTableResource()
}, [listenData])
const getTableResource = async()=>{
const res = await getAjax()
const {columns} = res
if (hasChangeRef.current) {
columns.forEach(element => {
if (element.filterSearch) {
element.filteredValue = null
}
})
}
// oth...
}
return <Table {...tableResource}
onChange={(pagination, filter) => {
// 这里,将其设为false
hasChangeRef.current = false
getTableResource(pagination)
}}
/>
}
大致逻辑是这样,时间太紧有的就省略了。
以上。