antd table跨页选择

原创已于 2022-07-26 10:24:23 修改 · 1.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-03-17 15:46:13 首次发布

Antd 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在前端表格组件中实现行级选择和全选功能，包括设置状态管理、处理单选和多选操作，以及响应式地切换选中状态。通过useState Hook管理选中状态，并提供详细示例代码来展示跨页选择逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<Table rowKey="id" columns={columns} dataSource={tableData} rowSelection={rowSelection}/>


const [selectedRowKeys, setSelectedRowKeys] = useState([]); //选中的key

const [selectedRows, setSelectedRows] = useState([]); //选中的rows（不需要可以去掉）

//跨页选择
const rowSelection = {
  selectedRowKeys,
  onSelect: (record, selected) => {
    if (selected) {
      setSelectedRowKeys((before) => {
        return [...before, record.id];
      });
      setSelectedRows((before) => {
        return [...before, record];
      });
    } else {
      setSelectedRowKeys((before) => {
        return before.filter((el) => el !== record.id);
      });
      setSelectedRows((before) => {
        return before.filter((el) => el.id != record.id);
      });
    }
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    if (selected) {
      setSelectedRowKeys((before) => {
        const ids = changeRows.map((el) => el.id);
        return [...before, ...ids];
      });
      setSelectedRows((before) => {
        return [...before, ...changeRows];
      });
    } else {
      const ids = changeRows.map((el) => el.id);
      setSelectedRowKeys((before) => {
        return before.filter((el) => ids.indexOf(el) == -1);
      });
      setSelectedRows((before) => {
        return before.filter((el) => ids.indexOf(el.id) == -1);
      });
    }
  },
};