自定义过滤antd表dataSource的子项

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义过滤antd表dataSource的子项相关的知识,希望对你有一定的参考价值。

我正在使用antdtable组件。我希望能够将节点过滤到任何后代。

我跟随antdcustom filter的例子。这个例子不是树形结构,所以这里有一个正确设置的codesandbox

onFilter似乎只遍历根节点。我不知道如何显示特斯拉>模型3我在搜索输入中键入'3'。我知道我必须为特斯拉返回true,但我仍然不明白如何为true返回Model 3

数据

const data = [
      {
        key: "13",
        name: "Tesla",
        data: {
          description: "Car manufacturer",
          type: "Organization"
        },
        children: [
          {
            key: "4444",
            name: "Model S",
            data: {
              description: "The fastest",
              type: "Project"
            }
          },
          {
            key: "1444323",
            name: "Model 3",
            data: {
              description: "The cheapest",
              type: "Project"
            }
          }
        ]
      },
      {
        key: "1",
        name: "Microsoft",
        data: {
          description: "#1 software company",
          type: "Organization"
        }
      }
    ];

应用

class App extends React.Component {
  state = {
    searchText: '',
  };

  getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({
      setSelectedKeys, selectedKeys, confirm, clearFilters,
    }) => (
      <div style={{ padding: 8 }}>
        <Input          
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}              
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
        >
          Search
        </Button>            
      </div>
    ),

    // onFilter seems to only loop over root nodes
    onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),    
    render: (text) => (
      <Highlighter
        ...
      />
    ),
  })     

  render() {
    const columns = [{
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      ...this.getColumnSearchProps('name'),
    }];
    return <Table columns={columns} dataSource={data} />;
  }
}
答案

您可以编写一个函数来获取节点的后代值(基于dataIndex)并过滤任何具有搜索文本的函数。

这将在返回值之前进入getColumnSearchProps:

const getDescendantValues = (record) => {
        const values = [];
        (function recurse(record) {
            values.push(record[dataIndex].toString().toLowerCase());
            record.children.forEach(recurse);
        })(record);
        return values;
    } 

...这将是更新的onFilter:

onFilter: (value, record) => {
  const recordName = record[dataIndex] || record.data[dataIndex];
  const searchLower = value.toLowerCase();
  return recordName
      .toString()
      .toLowerCase()
      .includes(searchLower)
      ||
      getDescendantValues(record).some(descValue => descValue.includes(searchLower));
  }

我在这里分叉你的沙盒:https://codesandbox.io/s/10jp9wql1j

...它包含所有根节点以及满足搜索条件的任何后代。但是,它不会过滤掉不满足您的搜索条件的其他后代节点。

以上是关于自定义过滤antd表dataSource的子项的主要内容,如果未能解决你的问题,请参考以下文章

Antd Table 删除最后一页数据引发的序号问题

React Typescript:Antd 表过滤器

Kendo UI Mobile列表视图的自定义过滤器?

具有列值的空格的材料表数据源过滤器

react+antd表格之行/列合并

ant design中对dataSource执行过滤功能后获取组件表中过滤后的数据