AntDesign Table 分页多选解决方法

2023-11-11 13:28:58

Ant Design Table 组件：实现分页多选的完整指南

Ant Design 的 Table 组件是一个强大的数据表格组件，提供丰富的功能，例如分页、排序、过滤和多选。本指南将深入介绍如何使用 Table 组件实现分页多选，涵盖从数据源配置到接口分页处理等各个方面。

配置数据源

首先，我们需要定义一个数据源。它可以是一个模拟数据源，也可以是来自服务器的实际数据。本示例中，我们使用一个模拟数据源：

const data = [
  {
    key: '1',
    name: 'John Doe',
    age: 30,
  },
  {
    key: '2',
    name: 'Jane Smith',
    age: 25,
  },
  {
    key: '3',
    name: 'Michael Jones',
    age: 28,
  },
];

创建 Table 组件

接下来，使用 Table 组件呈现数据：

const App = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const onSelectChange = (selectedRowKeys, selectedRows) => {
    console.log('selectedRowKeys: ', selectedRowKeys);
    console.log('selectedRows: ', selectedRows);
    setSelectedRowKeys(selectedRowKeys);
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
  ];

  return (
    <div>
      <Table
        rowSelection={{
          type: 'checkbox',
          onChange: onSelectChange,
        }}
        columns={columns}
        dataSource={data}
      />
      <Button type="primary">确定</Button>
    </div>
  );
};

export default App;

接口分页支持

如果接口支持分页，可以使用 Table 组件的 pagination 属性：

<Table
  pagination={{
    total: 100, // 总条数
    pageSize: 10, // 每页条数
  }}
  ...
/>

模糊查询

使用 filterDropdown 属性可以实现模糊查询：

const filterDropdown = ({ setSelectedKeys, selectedKeys, confirm }) => {
  return (
    <Input.Search
      placeholder="Search"
      value={selectedKeys[0]}
      onChange={(e) => {
        setSelectedKeys(e.target.value ? [e.target.value] : []);
      }}
      onPressEnter={() => confirm()}
      style={{ width: 188 }}
    />
  );
};

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    filterDropdown,
  },
  ...
];