Antd的table筛选,表头columns的filters过滤清空

Antd的table筛选,表头columns的filters过滤清空Form+Table实现了自定义筛选菜单的功能。具体可以参考https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel。但是此功能会有bug:选择相应的搜索条件后,点击“搜索”按钮,Table会渲染相应的数据,且Table表头也有自带的过滤功能(实际上是column的filters属性起的作用);然后再点击“清除”按钮,所有的搜索条件和表头里filters过滤的条件都要被清除。但是Ta.

大家好,又见面了,我是你们的朋友全栈君。

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账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号