javascript - Ant Design 表格搜索定制

Question

我正在使用 ant design table，我使用 getColumnSearchProps 进行列驱动 搜索。我想在列的标题中包含 search input。但我不知道如何处理此列的搜索和输入？

数据:

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Joe Black',
    age: 42,
    address: 'London No. 1 Lake Park',
  }]

这是我的专栏:

const columns = [
    {
        title: (
            <>
                <Search
                    placeholder="search"
                    prefix={<CPIcon type="search" />}
                    onChange={??????????????}
                />
                name
            </>
        ),
        dataIndex: 'name',
        key: '1',
        align: 'right',
        render: text => (<h1>{text}</h1>)
    },

    other columns ...
]

并在渲染中:

<Table columns={columns} dataSource={data} />

Answer 1

使用Array.filter()与 String.includes()

另外，请注意 Input.Search只添加了两个属性:onSearch 和 enterButton，所以不使用任何额外的 props 渲染它是没有意义的。

export default function App() {
  const [dataSource, setDataSource] = useState(data);
  const [value, setValue] = useState('');

  const FilterByNameInput = (
    <Input
      placeholder="Search Name"
      value={value}
      onChange={e => {
        const currValue = e.target.value;
        setValue(currValue);
        const filteredData = data.filter(entry =>
          entry.name.includes(currValue)
        );
        setDataSource(filteredData);
      }}
    />
  );

  const columns = [
    {
      title: FilterByNameInput,
      dataIndex: 'name',
      key: '1'
    }
  ];

  return (
    <FlexBox>
      <Table columns={columns} dataSource={dataSource} />
    </FlexBox>
  );
}