大家好,又见面了,我是你们的朋友全栈君。
Form +Table 实现了自定义筛选菜单的功能。具体可以参考 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel。
但是此功能会有bug:
选择相应的搜索条件后,点击“搜索”按钮,Table 会渲染相应的数据,且Table 表头也有自带的过滤功能(实际上是column的filters属性起的作用);然后再点击“清除”按钮,所有的搜索条件和表头里filters过滤的条件都要被清除。但是 Table 组件表头column里的过滤条件未清空。导致重新发起请求时,table列表展示的仍然是上次带了filters的筛选条件,并没有清空。
解决方案:filteredValue。具体API参考:https://2x.ant.design/components/table-cn/
具体源码:
// 初始化state:filteredInfo
const [filteredInfo, setFilteredInfo] = useState(null);
// columns: 赋属性filteredValue
const columns = [{ title: 'Cluster', dataIndex: 'clusterName', ...getColumnSearchProps('clusterName'), }, { title: 'App', dataIndex: 'appId', ...getColumnSearchProps('appId'), }, { title: 'Namespace', dataIndex: 'nameSpaceName', ...getColumnSearchProps('nameSpaceName'), }, { title: 'Key', dataIndex: 'key', ...getColumnSearchProps('key'), },{ title: 'Value', dataIndex: 'value', width: '500px', ...getColumnSearchProps('value'), }]; const getColumnSearchProps = (dataIndex: any) => ({ filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, filters }) => { return ( <div style={ { padding: 8 }}> <Input ref={searchInputRef} placeholder={`Search ${dataIndex}`} value={selectedKeys && selectedKeys[0]} onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])} onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)} style={ { width: 188, marginBottom: 8, display: 'block' }} /> <div style={ {display: 'flex', flexDirection: 'row', justifyContent: 'center'}}> <Button type="primary" onClick={() => handleSearch(selectedKeys, confirm, dataIndex)} icon="search" size="small" style={ { width: 70, marginRight: 15 }} > 确认 </Button> <Button onClick={() => handleReset(clearFilters)} size="small" style={ { width: 70 }}> 清空 </Button> </div> </div> )}, filterIcon: filtered => <Icon type="search" style={ { color: filtered ? '#1890ff' : undefined }} />, onFilter: (value, record) => record[dataIndex] ?record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : '', onFilterDropdownVisibleChange: visible => { if (visible) { setTimeout(() => ((searchInputRef as any).current as any).select(), 100); } }, filteredValue: filteredInfo && filteredInfo[dataIndex], render: text => searchedColumn === dataIndex ? ( <Highlighter highlightStyle={ { backgroundColor: '#ffc069', padding: 0 }} searchWords={[searchText]} autoEscape textToHighlight={text ? text.toString() : ''} /> ) : ( text ), });
// Table: 添加onChange事件,并赋值给filteredInfo
<Table onChange={tableChange} columns={columns} dataSource={dataSource} pagination={false} rowKey={(recode, index) => index.toFixed()} bordered /> const tableChange = ({ current: pageNum, pageSize }, filters) => { console.log('filters', filters); setFilteredInfo(filters); }
// 查询按钮:setFilteredInfo(null)
const handleSubmit = (e: any) => { e.preventDefault(); props.form.validateFields(async (err, values) => { if (err) { return err } const { key, value, haveLike } = values; if (key || value) { getApolloListFunc(key, value, haveLike); setFilteredInfo(null); } else { message.warning('key和value中至少得填写一项查询') } }) }
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143433.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...