在AntD列表操作中使用条件

，可以通过AntD的Table组件来实现。Table组件是AntD中用于展示数据的表格组件，它提供了丰富的功能和配置选项，包括条件筛选。

在AntD的Table组件中，可以通过设置columns属性来定义表格的列，其中每一列可以设置筛选条件。具体步骤如下：

导入Table组件和相关依赖：

import { Table, Input, Button, Space } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

定义表格的列，并设置筛选条件：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    filters: [
      { text: '张三', value: '张三' },
      { text: '李四', value: '李四' },
    ],
    onFilter: (value, record) => record.name.includes(value),
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    filters: [
      { text: '20岁以下', value: '20' },
      { text: '20-30岁', value: '30' },
      { text: '30岁以上', value: '40' },
    ],
    onFilter: (value, record) => record.age === parseInt(value),
  },
  // 其他列...
];

定义表格的数据：

const data = [
  { key: '1', name: '张三', age: 25 },
  { key: '2', name: '李四', age: 30 },
  // 其他数据...
];

渲染Table组件，并设置筛选功能：

const App = () => {
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');

  const getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          placeholder={`搜索 ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            搜索
          </Button>
          <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
            重置
          </Button>
        </Space>
      </div>
    ),
    filterIcon: (filtered) => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
      record[dataIndex] ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : '',
    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        setTimeout(() => searchInput.select(), 100);
      }
    },
    render: (text) =>
      searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
          searchWords={[searchText]}
          autoEscape
          textToHighlight={text ? text.toString() : ''}
        />
      ) : (
        text
      ),
  });

  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };

  const handleReset = (clearFilters) => {
    clearFilters();
    setSearchText('');
  };

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

ReactDOM.render(<App />, mountNode);

通过以上步骤，就可以在AntD的Table组件中使用条件筛选功能。用户可以在表格的列头中选择筛选条件，然后表格会根据条件进行数据筛选和展示。

注意：以上代码示例中的搜索功能使用了AntD的Input、Button和Space组件，以及AntD的SearchOutlined图标。如果需要使用其他AntD组件或自定义样式，可以根据实际需求进行修改。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云数据库（TencentDB）、腾讯云对象存储（COS）、腾讯云人工智能（AI Lab）等。具体产品介绍和链接地址请参考腾讯云官方网站。