最近有一个需求,想要实现在protable的查询栏上,当用户选择查询条件时,立刻进行筛选,而不用点击查询,研究了一下发现要使用受控的params

const queryRef = useRef()
const [userQuery, setUserQuery] = useState({})
<ProTable  formRef={queryRef} params={userQuery} />

当你控制了params后, 默认渲染出的查询表单的查询和重置按钮就会失效,需要自己去实现

如果我们要指定某个字段进行自动搜索,那么就需要在column里配置

下面是一个选择框的例子,我们配置这个选择框选择任意值以后,就修改userQuery这个参数, 并且触发reload重新刷新

        {
            title: <FormattedMessage id="DMT92" />,
            dataIndex: 'Location',
            width: "10%",
            valueType: 'select',
            fieldProps: { 
                showSearch: true,
                onSelect: (v)=> {
                    let nQ = userQuery
                    nQ["Location"] = v
                    setUserQuery(nQ)
                    reload()
                },
                onClear: ()=> {
                    let nQ = userQuery
                    nQ["Location"] = ""
                    setUserQuery(nQ)
                    reload()
                }
             },
             request: ()=> {
                return options.options("SMaxLocation")
             }
        },

如果我们要使用输入框自动触发搜索,那么我们可能需要加上一个节流函数, 防止性能问题

function debounce(func, wait) {
    let timeoutId;

    return function (...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, wait);
    };
} 


       {
            title: <FormattedMessage id="WST18" />,
            dataIndex: 'Model',
            width: "15%",
            ellipsis: true,
            fieldProps: { 
                onChange: debounce((event) => {
                    let nQ = userQuery
                    nQ["Model"] = event.target.value
                    setUserQuery(nQ)
                    reload()
                }, 500)
            }
        },

如果我们需要重置查询表单, 那么可以使用

queryRef?.current?.resetFields()