Question

我正在使用antd的{{1}}组件。我希望能够将节点过滤到任何后代。

我以table的{{3}}为例。该示例不是树形结构，因此这里的custom filter具有正确的设置。

antd似乎仅在根节点上循环。我不知道如何显示Tesla> Model 3，因此我在搜索输入中键入“ 3”。我知道我必须为特斯拉退货onFilter，但我仍然不知道如何为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"
        }
      }
    ];

Answer 1

您可以编写一个函数来获取节点的后代值（基于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的子级

1 个答案: