思路:
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)
}}
/>
}
大致邏輯是這樣,時間太緊有的就省略了。
以上。